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，并将其删除，包括按钮本身。

您的整个代码如下

$('#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;
});

应该工作：）

从ul中删除并编辑动态创建的li

3 个答案: