Question

我想通过单击列表项中的“ x”按钮来删除它。当我单击“ x”按钮时，它不会将其删除。 AJAX响应为“确定”，但我所有的列表项均保留。

我在成功方法中尝试了.remove（）的不同选项；我尝试创建一个单独的delete函数，以在AJAX promise解析时调用；我试过在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作为以下演示。

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

问题是echo $conn->error();不知道在$result中应该引用什么deleteChirp

您是否尝试过将ID添加到点击功能中？

li

然后您可以从如下函数中获取它：

let id = $('li').attr('id')

完整代码：

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

AJAX删除请求+通过ID删除li

2 个答案: