通过 AJAX 从数据库和 DOM 中删除对象

Question

所以我有一个简单的 AJAX post 请求，它按照我的意愿从模型中删除对象，但我很难正确地从 DOM 中删除它。

function removeFriend(id){

    let dataId = `${id}`

    $.ajax({

        type: 'POST',

        url: `/delete/friend`,

        data: {

            friend_id: `${id}`,

            csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),

            action: 'post'

        },

        success: function(json){

            let tbody = document.querySelector('tbody');

            let row = tbody.querySelector('tr[data-id=dataId]');

            console.log(row);

            row.remove();

            alert('friend has been deleted')

        },

        error: function(xhr, errmsg, err) {

            console.log(error)

        }

    })

}

我不断收到信息index.js:119 Uncaught TypeError: Cannot read property 'remove' of null，console.log(row) 显示为空。我已经尝试过let row = tbody.querySelector('tr[data-id=`${id}`]');并且结果相同。

我已经尝试过let row = tbody.querySelectorAll('tr[data-id=dataId]');，但 console.log(row) 的输出是一个空的 NodeList，NodeList []后跟index.js:119 Uncaught TypeError: row.remove is not a function.

这就是我的桌子的样子：

    <table class="table table-striped table-sm" id="my_friends">

        <thead>

            <tr>

                <th>Nick name</th>

                <th>First name</th>

                <th>Last name</th>

                <th>Likes</th>

                <th>DOB</th>

                <th>lives in</th>

                <th>Remove friend</th>

            </tr>

        </thead>

        <tbody>

        {% for friend in friends %}

        <tr data-id="{{ friend.id }}">

            <td>{{friend.nick_name}}</td>

            <td>{{friend.first_name}}</td>

            <td>{{friend.last_name}}</td>

            <td>{{friend.likes}}</td>

            <td>{{friend.dob | date:"Y-m-d"}}</td>

            <td>{{friend.lives_in}}</td>

            <td><button type="button" class="remove-friend" name="remove-friend" value="{{ friend.id }}">Remove</button></td>

        </tr>

        {% endfor %}

        </tbody>

    </table>

我知道我肯定已经正确分配了数据属性，因为我可以看到它显示在我的 Chrome 浏览器元素中。

Answer 1

使用传递给选择器中删除好友函数的 idlet&nbsp;row&nbsp;=&nbsp;tbody.querySelector(`tr[data-id="${id}"]`);