从 ul 删除和编辑动态创建的 li答案

【问题标题】：Delete and edit a dynamically created li from ul从 ul 删除和编辑动态创建的 li
【发布时间】：2023-03-31 23:51:01
【问题描述】：

我正在创建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>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

使用此 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();
});

【讨论】：

谢谢 :-) 只有一件事我如何编辑这个 li ？
@codeworm 这将涉及更多脚本。到目前为止，您尝试过什么吗？
我已经尝试过这段代码，但它在 li ' $(document).on('click', 'ul#listItem li button.edit', function() { $ (this).closest('li').prop('contenteditable', true); });'
我认为this question and answer 会为您指明正确的方向。设置需要更多时间（因为您必须在 li 中输入额外的输入，但这是正确执行此操作的好方法！

【解决方案2】：

改变

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

收件人：

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

应该工作:)

【讨论】：

【解决方案3】：

试试这个

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

【讨论】：