從ul中刪除和編輯動態創建的li

Question

我通過從輸入框提供輸入來創建li ，並使用jquery在li追加數據，但是在添加li之后，我添加了刪除按鈕，但是它可以工作，但是可以通過單擊任何刪除按鈕來刪除所有li 。 如何一一刪除。 還有另一件事，我該如何通過單擊來編輯那些li ？

這是代碼：

$('#submit').on('click', function(){
    var $item = $('#addList').val();

    if($item.trim() == ''){
        alert('please enter the value');
    } else {
        $('ul#listItem').append('<li>'+ $item + '<button class="btn">delect</button>' + '</li>');

        $(document).on('click', '.btn', function(){
            $('ul#listItem > li').remove();
            return false;
        });
    }

    $item = $('#addList').val(' ');
});

這是html：

<form>
    <input type="text" id="addList">
    <input type="button" id="submit" value="Add">
</form>

Answer 1

嘗試這個

$(document).on('click', 'ul#listItem > li .btn', function(){
    $(this).closest('li').remove();
    return false;
});

Answer 2

使用此JavaScript一次捕獲所有內容：

$(document).on('click', 'ul#listItem li button.btn', function() {
    $(this).closest('li').remove();
});

單擊文檔中的任何位置（完整窗口）時，它將檢查目標是否與選擇器ul#listItem li button.btn匹配，這些選擇器是列表中的按鈕。 然后，它尋找最接近的li ，它是按鈕周圍的那個li ，並刪除它，包括按鈕本身。

您的整個代碼如下

$('#submit').on('click', function(){
    var $item = $('#addList').val();

    if($item.trim() == '') {
        alert('please enter the value');
    } else {
        $('ul#listItem').append('<li>'+ $item + '<button class="btn">delect</button>' + '</li>');

    }
    $item = $('#addList').val(' ');
});

$(document).on('click', 'ul#listItem li button.btn', function() {
    $(this).closest('li').remove();
});

Answer 3

更改

$(document).on('click', '.btn', function(){
     $('ul#listItem > li').remove();
     return false;
});

至：

$(document).on('click', '.btn', function(){
    $(this).parent("li").remove();
    return false;
});

應該管用 ：）