Javascript 通过AJAX Post获取新创建对象的对象id

我有一个AJAX post函数，它可以正常工作，但问题在于删除按钮。我需要将对象的id添加到remove按钮的值中，因为我有另一个removeFriend函数，它依赖remove按钮的值来删除正确的行

function addNewFriend(formData){

    const friendForm = document.querySelector('#friend-form');
    const nicknameInput = document.querySelector('#id_nick_name');

    $.ajax({
        type: 'POST',
        url: "/friend",
        data: formData,
        success: function (response) {
            // on successfull creating object
            // 1. clear the form.
            friendForm.reset();
            // 2. focus to nickname input 
            nicknameInput.focus();

            // display the new friend to table.
            var instance = JSON.parse(response["instance"]);
            var fields = instance[0]["fields"];
            const row = document.createElement('tr');
            row.innerHTML = `
            <td>${fields["nick_name"]}</td>
            <td>${fields["first_name"]}</td>
            <td>${fields["last_name"]}</td>
            <td>${fields["likes"]}</td>
            <td>${fields["dob"]}</td>
            <td>${fields["lives_in"]}</td>
            <td><button type="button" class="remove-friend" name="remove-friend" value="${fields["id"]}">Remove</button></td>
            `;
            const tbody = document.querySelector('tbody');
            tbody.appendChild(row);
        },
        error: function (response) {
            // alert the error if any error occured
            alert(response["responseJSON"]["error"]);
        }
    })
}

有人知道我如何获得新创建的好友的对象Id，以便正确设置remove按钮的值吗

根据请求添加：删除好友功能

     document.querySelector('tbody').addEventListener('click', function(e){
         if(e.target.innerHTML == 'Remove'){
             e.preventDefault();
             console.log("Remove friend btn clicked?");
             console.log(e.target.value);
             removeFriend(e.target.value)
         }
     })

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="${id}"]`);
            console.log(row);
            row.remove();
            alert('friend has been deleted')
        },
        error: function(xhr, errmsg, err) {
            console.log(error)
        }
    })
}

---

稍微调整一下您的函数：

function addNewFriend(formData){
    ...
    <td><button type="button" class="remove-friend" name="remove-friend" onclick="removeFriend(event,'${fields["id"]}')">Remove</button></td>
    ...
}

function removeFriend(e,id){
    e.preventDefault();
    ...
}

函数addNewFriend（formData）{
...
去除
...
}
函数removeFriend（e，id）{
e、 预防默认值（）；
...
}

您可以去掉这个

文档。querySelector（'tbody'）

整个部分

我们在这里所做的是为按钮定义一个

onclick

属性，该属性将直接触发

removeFriend

函数

---

编辑：直接在

removeFriend

功能中添加

preventDefault

以禁用表单提交。

您也可以添加removeFriend功能吗？@hymnzy我已经相应地编辑了我的帖子。问题在于

addEventListener

仅适用于页面首次加载时出现的项目。行中的其他字段是否填充，如果您输入.log（响应）会得到什么？谢谢@Musa

console.log（response）

帮助我查看了创建的新对象，从中我可以了解如何访问“pk”属性，现在一切正常。

function addNewFriend(formData){
    ...
    <td><button type="button" class="remove-friend" name="remove-friend" onclick="removeFriend(event,'${fields["id"]}')">Remove</button></td>
    ...
}

function removeFriend(e,id){
    e.preventDefault();
    ...
}