通过 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

使用传递给选择器中删除好友函数的 id

let row = tbody.querySelector(`tr[data-id="${id}"]`);