通过 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（行）显示为空。我试过 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 的样子：

    <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}"]`);

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

Removing an object from database and the DOM via AJAX

javascript

django

ajax

dom-manipulation