Adding/removing <li> 个元素 jQuery

Question

刚开始学习JavaScript/jQuery，做了一个小测试网站来练习编码。

在我做的一项测试中，有一个清单说牛奶和鸡蛋。有一个输入字段和一个按钮，您可以在其中键入内容，单击按钮，然后将其添加到列表中。然后我添加了一个选项，如果您单击其中一个列表项，它就会将其删除。这有效，但仅适用于预设的牛奶和鸡蛋项目，不适用于您自己添加的任何项目。

我认为这是因为没有为新添加的项目加载代码，但我不确定。有人可以帮忙吗？

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Practice 3</title>
<link href="index.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>

<body>

    <div class="Title" align="center">
        <h1>Hello</h1>
        <p>This website will use JavaScript to create interactive elements.</p>
    </div>

    <div class="1">
        <h3>Test 1</h3>
        <ul id="list">
            <li>Milk</li>
            <li>Eggs</li>
        </ul>
        <input id="textbox">
        <button id="add">Add to list</button>
    </div>

    <script>
        $('#add').click(function() {
            var listvalue = $('#textbox').val();
                    $("#textbox").val("");
                $('ul').append('<li>' + listvalue + '</li>');
        });

        $('#textbox').keypress(function(event) {
            if(event.which === 13) {
                var listvalue = $('#textbox').val();
                    $('#textbox').val("");
                    $('ul').append('<li>' + listvalue + '</li>');
            }
        });

        $('li').click(function(e) {
            $(e.target).remove();
        });
    </script>
</body>
</html>

Answer 1

使用event delegation

$('#list').on('click', 'li', function(e) {
   $(this).remove();
});

Example

Answer 2

您可以使用 on 将点击甚至绑定到文档，然后指定一个选择器以指定它应该只触发 li 个元素：

$(document).on('click', 'li', function (e) {
    $(this).remove();
});

这仍然适用于新添加的 li 元素，因为事件处理程序本身绑定到 文档本身 ，而不是单个元素。它只是执行运行时检查以确保分派的事件与提供的选择器匹配。

Answer 3

Gone Coding 在 Whosebug 上的回答：

下面是如何使用 jquery 的示例：

function moveItems(origin, dest) {
  $(origin).closest("li").appendTo(dest);
}
$(document).on('click', '.add', function () {
    moveItems(this, '#listTwo');
});

$(document).on('click', '.remove', function () {
    moveItems(this, '#listOne');
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/r7j3odyy/4/

Adding/removing <li> 个元素 jQuery

Adding/removing <li> elements with jQuery

html

javascript

jquery

append