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>

标签： javascriptjqueryhtmlcss

Answer 1

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

您可以使用单独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>