Question

此列表程序可让您动态添加和删除项目。

添加工作正常。删除仅删除已存在的项目（Apple，香蕉和橙色），但不删除我添加的项目。请帮忙！

<html>
<head>
    <script src="jquery-1.11.0.js"></script>
    <script>

        $(document).ready(function(){

            $('#newItemForm').on('submit', function(e){
                addElements(e);
            });

            // Delete elements from the list
            $('.delete').click(function(){
                $(this).parent.remove();
            });

        });

        // Add new elements to the list
        function addElements(e)
        {
            e.preventDefault();
            var newText = $('input:text').val();
            $('input:text').val('');
            $('#myList').append("<li>"+newText+"<button class='delete'>Delete</button></li>");
        }

    </script>

    <h1>My List</h1>
    <body>
    <ol id="myList">
        <li>Apple<button class="delete">Delete</button></li>
        <li>Banana<button class="delete">Delete</button></li>
        <li>Orange<button class="delete">Delete</button></li>
    </ol>

    <form id=newItemForm>
        <input type="text" id="newItem" value="New Item"/>
        <input type="submit" value="Add to list"/>
    </form>

    </body>
</html>

Answer 1

您需要将click回调绑定到添加的动态元素：

function addElements(e)
        {
            e.preventDefault();
            var newText = $('input:text').val();
            $('input:text').val('');
            var $el = $("<li>"+newText+"<button class='delete'>Delete</button></li>");

            $('#myList').append($el);
            $(".delete", $el).click(function(){ $(this).parent.remove(); });
        }

修改

更好的方法是使用：

$('#myList').on('click', '.delete', function() { $(this).parent.remove(); });

这将适用于动态元素，而无需重新绑定点击回调

在JQuery / HTML列表中，无法删除一些项目

1 个答案: