AJAX删除请求+按id删除li

Question

我想通过单击其中的“x”按钮来删除列表项。当我单击“x”按钮时，它不会删除它。 AJAX 响应为“OK”，但我的所有列表项仍然存在。

我在成功方法中使用 .remove() 尝试了不同的选项；我尝试创建一个单独的删除函数以在 AJAX 承诺解决时调用；我尝试在 AJAX 请求中添加/删除键/值对；我对 AJAX 请求和服务器端操作还很陌生，但是文档和视频并没有帮助我解决这个问题。

const getAllChirps = () => {
    $.ajax({
        type: "GET",
        url: "/api/chirps/"
    })
        .then(chirps => {
            $('ul').empty();
            chirps.forEach(chirp => {
                $('ul').append(`<li id=${chirp.id} class="list-group-item"> 
            ${chirp.text} 
            <button onclick="deleteChirp()"> X </button>
            </li>`)
            })
        })
};
const deleteChirp = () => {
    let id = $('li').attr('id')
    alert('Delete button works');
    $.ajax({
        type: "DELETE",
        url: '/api/chirps/:' + id,
        success: function () {
            $('li').remove(id);
            getAllChirps();
        }
    }).then(res => console.log(res));
}

我希望在单击“x”按钮时删除列表项。相反，我在控制台中收到“OK”响应，并且没有删除任何列表项。

Answer 1

将按钮作为参数传递给 deleteChirp 函数。然后找到父li如下demo。

const getAllChirps = () => {
    $('ul').empty();
	for(var i=0; i<3; ++i)
		$('ul').append('<li id="A' + i + '" class="list-group-item">A' + i + ' Label<button onclick="deleteChirp(this)"> X </button></li>');
};

const deleteChirp = (ele) => {
    $(ele).closest("li").remove();
};

$(document).ready(function() {
    getAllChirps();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul><li>Test</li></ul>

Answer 2

问题是deleteChirp 不知道li 应该在let id = $('li').attr('id') 中引用什么

您是否尝试将 id 添加到点击功能？

onclick="deleteChirp('+chirp.id+')"

然后你可以像这样在函数中获取它：

const deleteChirp = (liId) => {

完整代码：

const getAllChirps = () => {
    $.ajax({
        type: "GET",
        url: "/api/chirps/"
    })
        .then(chirps => {
            $('ul').empty();
            chirps.forEach(chirp => {
                $('ul').append(`<li id=${chirp.id} class="list-group-item"> 
            ${chirp.text} 
            <button onclick="deleteChirp('+chirp.id+')"> X </button>
            </li>`)
            })
        })
};
const deleteChirp = (liId) => {
    let id = liId
    alert('Delete button works');
    $.ajax({
        type: "DELETE",
        url: '/api/chirps/:' + id,
        success: function () {
            $('li#'+id).remove();
            getAllChirps();
        }
    }).then(res => console.log(res));
}