Question

我正在尝试使用HTML / CSS，Javascript和JQuery创建待办事项列表。当我尝试从列表中删除项目时出现的问题。这是Javascript。

$(document).ready(function(){
        $('#add').click(function(){
            if($('#input').val() != '')
                $('.container').append('<p class="todo">'+$('#input').val()+'</p><span class="del">&times</span><br/>');
        });

      $(document).on('click','.del',function(){
        $(this).click(function(){
            $('.todo').hide(); 
        });
      });
    });

HTML

<body>
    <h1 class="header">To-Do List</h1>
    <hr/>
    <br/>
    <input type="text" id="input"/>
    <button id="add">Add</button>
    <br/>
    <br/>
    <div class="container">
    </div>
</body>

上面的内容是当单击一个del元素[an x]时，它会删除所有动态生成的todo [paragraph]元素。我问如何更改代码，因此单击del元素将删除它生成的todo元素。我知道我可以使用ID但我觉得这太麻烦了。谢谢你的帮助。

Answer 1

您可以使用 .prev() 仅隐藏点击.todo的上一个同级.del段：

$('.container').on('click','.del',function(){
    $(this).prev().hide(); 
});

另请注意，您不再需要为.click()使用.del事件，因为您已经使用事件委派将click事件附加到它们以及使用最接近的静态父项对于委托事件而不是$(document)。

Answer 2

试试这个jQuery，这也会隐藏'x'：

          $(document).on('click','.del',function(){
                $(this).hide(); 
                $(this).prev().hide();
          });

使用JQuery一次删除一个项目

2 个答案: