JQuery удаление <li>с помощью события onclick

Question

У меня есть ul, в котором я добавлю элементы, используя JQuery, у меня есть это

function addElement(e) {
    let text = $('#itemToAdd').val();
    let newItem = $('<li>' + text + '</li>');
    let removeBtn = $('<button onclick = "removeElement">X</button>');

    newItem.append(removeBtn);
    $('#shoppingList').append(newItem);
    $('#itemToAdd').val('');
    e.preventDefault();
}

$(document).ready(function() {
    $("#addBtn").on('click', addElement);
});

Для удаления элементов у меня есть это:

function removeElement() {
    $(this).parent().remove();
}

Добавление функция работает потрясающе, а удаление - нет.

Answer 1

Если вы используете onclick, то вам нужно вызывать функцию со ссылкой, так как this не будет ссылаться на элемент, по которому щелкнули (чаще всего это относится к window объекту), и на основе этого удалить этот элемент.

Создание элемента:

let removeBtn = $('<button onclick = "removeElement(this)">X</button>');

Функция:

function removeElement(ele) {
    $(ele).parent().remove();
}

---

Или поочередно вы можете использовать существующий функция, но связывает обработчик событий, используя jQuery после создания элемента.

let removeBtn = $('<button>X</button>');
removeElement.click(removeElement);

Другой вариант будет делегирование события , которое помогает обрабатывать события на динамически создаваемых элементах.