javascript - 删除任务函数 JQuery 删除键

Question

我正在尝试创建一个函数来删除待办事项列表中的任务。现在，每个任务上都有一个删除按钮。我想要它以便在底部有一个删除按钮，这将删除已选中(或划掉)的任务。我该怎么做？

 
        function addListItem(){
            var text = $("#new-text").val();
            if(text!=""){
                $("#todolist").append('<li><input type="checkbox" class="done" />                                        '+text+'  <button class="delete">Remove Task</button></li>');
                $("#new-text").val('');
               
            }
           
         }
         function deleteItem(){
            if($(this).parent().css('textDecoration') == 'line-through' ) {
                $(this).parent().remove();
            }else{
                $(this).parent().remove();
            }
         }
        
         function finishItem(){
            if($(this).parent().css('textDecoration') == 'line-through' ) {
                $(this).parent().css('textDecoration', 'none');
            }else{
                $(this).parent().css('textDecoration', 'line-through');
            }
         }
         
         $(function()  {
            $('input[type=text]').keydown(function(e){
               if(e.keyCode === 13){
                    addListItem();
                }  
            });
            $("#add").on('click', addListItem);
            $(document).on('click', '.delete', deleteItem);
            $(document).on('click', '.done', finishItem);
         });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="x" class="position">To-Do List</h1>
               <div contenteditable="true">
               <ul id="todolist" class="background">
                   <li><input type="checkbox" class="done"/> Clean house <button class = "delete">Remove Task</button></li>
                   <li><input type="checkbox" class="done"/>Buy milk <button class = "delete">Remove Task</button></li>
               </ul>
            </div>
               <input type="text" id="new-text" /><button  id="add">Add</button>

Answer 1

您想遍历 $("#todolist input:checked") 返回的数组并删除每个元素。循环中的每个元素都是选中的复选框之一。例如 $("#todolist input:checked").each(function (index, elem) { deleteItem(elem) }); 或者在你的情况下 deleteItem.apply(elem) 因为您在 deleteItem 函数中使用了 $(this)。

您可以使用单独的 deleteCheckedItems() 处理程序来处理删除所有按钮，您的新代码将/可能如下所示:

function addListItem() {
  var text = $("#new-text").val();
  if (text != "") {
    $("#todolist").append('<li><input type="checkbox" class="done" />                                        ' + text + '  <button class="delete">Remove Task</button></li>');
    $("#new-text").val('');

  }

}

function deleteCheckedItems() {
  $("#todolist input:checked").each(function(index, elem) {
    // use apply to manually set the this context to the elem, since deleteItem
    // uses $(this) to check the element
    deleteItem.apply(elem);
  });
}

function deleteItem() {
  if ($(this).parent().css('textDecoration') == 'line-through') {
    $(this).parent().remove();
  } else {
    $(this).parent().remove();
  }
}

function finishItem() {
  if ($(this).parent().css('textDecoration') == 'line-through') {
    $(this).parent().css('textDecoration', 'none');
  } else {
    $(this).parent().css('textDecoration', 'line-through');
  }
}

$(function() {
  $('input[type=text]').keydown(function(e) {
    if (e.keyCode === 13) {
      addListItem();
    }
  });
  $("#add").on('click', addListItem);
  $(document).on('click', '.delete-checked', deleteCheckedItems);
  $(document).on('click', '.delete', deleteItem);
  $(document).on('click', '.done', finishItem);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="x" class="position">To-Do List</h1>
<div contenteditable="true">
  <ul id="todolist" class="background">
    <li><input type="checkbox" class="done" /> Clean house <button class="delete">Remove Task</button></li>
    <li><input type="checkbox" class="done" />Buy milk <button class="delete">Remove Task</button></li>
  </ul>
</div>
<button class="delete-checked">Delete All Completed</button><br/><br/>
<input type="text" id="new-text" /><button id="add">Add</button>