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

问题描述

因此，我有一个简单的AJAX发布请求，可以按照需要从模型中删除对象，但是我正在努力从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>

我知道我肯定已经正确分配了data属性，因为我可以在Chrome浏览器Elements中看到它。

解决方法

在选择器中使用传递给删除朋友功能的ID

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