AJAX запрос на удаление + удалить li по id

Question

Я хочу удалить элемент списка, нажав на кнопку «х» внутри него. Когда я нажимаю кнопку «х», она не удаляется. Ответ AJAX - «ОК», но все мои элементы списка остаются.

Я пробовал разные варианты с .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». Вместо этого я получаю ответ «ОК» в своей консоли, и элементы списка не удаляются.

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

Проблема в том, что deleteChirp не знает, на что li он должен ссылаться в let id = $('li').attr('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));
}