为什么.remove（）在回调函数中不起作用？

我想要发生的是当我单击x按钮时，该项目将在slideUp（）方法完成时移除。但是通过下面的代码，它会一次删除所有的项目，当我刷新页面时，它没有定义它。为什么.remove（）在回调函数中不起作用？

HTML

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>Simple Todo List</title> 
     <!-- CSS --> 
     <link rel="stylesheet" href="styles.css"> 
     <!-- jQuery --> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
     <script src="index.js"></script> 
    </head> 
    <body> 
     <div class="container"> 
      <h1>Things I've Gotta Get Done</h1> 
      <ul id="list-items"> 
      <!-- Here's where out todo list items will go! --> 
      </ul> 
      <form class="add-items"> 
       <input type="text" class="form-control" id="todo-list-item" placeholder="What do you need to do today?"> 
       <button class="add" type="submit">Add to List</button> 
      </form> 
     </div> 
    </body> 
</html>

CSS

.container { 
    margin: 0 auto; 
    min-width: 500px; 
    width: 45%; 
    text-align: left; 
    color: #3b3b3b; 
    font-weight: bold; 
    font-family: 'Helvetica', 'Arial', sans-serif; 
} 

form { 
    outline: 0; 
    height: 36px; 
    margin-top: 5%; 
    border: 3px solid #3b3b3b; 
} 

input[type="text"] { 
    outline: 0; 
    width: 55%; 
    height: 32px; 
    border: none; 
    font-size: 18px; 
    font-weight: normal; 
    padding-left: 10px; 
} 

.add { 
    outline: 0; 
    float: right; 
    width: 34%; 
    height: 36px; 
    color: #fff; 
    font-size: 18px; 
    border: none; 
    cursor: pointer; 
    background-color: #3b3b3b; 
} 

ul { 
    padding: 0; 
    text-align: left; 
    list-style: none; 
} 

hr { 
    border-bottom: 0; 
    margin: 15px 0; 
} 

input[type="checkbox"] { 
    width: 30px; 
} 

.remove { 
    float: right; 
    cursor: pointer; 
} 

.completed { 
    text-decoration: line-through; 
}

$(document).ready(function() { 
    $("#list-items").html(localStorage.getItem("listItems")); 
    $(".add-items").submit(function(event) { 
     event.preventDefault(); 
     var item = $.trim($("#todo-list-item").val()); 
     if (item.length > 0) { 
      if (item === "exercise" || item === "EXERCISE" || item === "Exercise"){ 
       $("#list-items").append("<li><input class='checkbox' type='checkbox' /><img src='assets/images/exercise.gif' alt='exercise'><a class='remove'>x</a><hr></li>"); 
       localStorage.setItem("listItems", $("#list-items").html()); 
       $("#todo-list-item").val(""); 
      } else { 
       $("#list-items").append("<li><input class='checkbox' type='checkbox' />" + item + "<a class='remove'>x</a><hr></li>"); 
       localStorage.setItem("listItems", $("#list-items").html()); 
       $("#todo-list-item").val("");     
      } 
     } 

    }); 

    $(document).on("change", ".checkbox", function() { 
     if ($(this).attr("checked")) { 
      $(this).removeAttr("checked"); 
     } else { 
      $(this).attr("checked", "checked"); 
     } 

     $(this).parent().toggleClass("completed"); 
     localStorage.setItem("listItems", $("#list-items").html()); 
    }); 

    $(document).on("click", ".remove", function() { 
     $(this).parent().slideUp("slow", function() { 
      $(this).parent().remove(); 
      localStorage.setItem("listItems", $("#list-items").html()); 
     }); 
    }); 

});

来源

2015-11-06 Jeramae Bohol

由于您呼叫的li元素slideUp()，回调内部，this指的li元素，所以当你说$(this).parent().remove()它正在删除ul元素，这就是为什么所有元素都被删除的原因。

所以，你可以删除由this提到的元素，没有必要要求.parent()

$(document).on("click", ".remove", function() { 
    $(this).parent().slideUp("slow", function() { 
    $(this).remove(); 
    localStorage.setItem("listItems", $("#list-items").html()); 
    }); 
});

来源

2015-11-06 08:48:24

http://jsfiddle.net/arunpjohny/ro5arz1h/1/ –

哇现在的工作。谢谢！ –

如果你不介意，你可以尝试解决我的其他职位？虽然已经有了一个可以回答的问题，但我真的觉得有一个更好的方法。下面是链接：http://stackoverflow.com/questions/33560867/animate-not-triggering-if-page-is-not-newly-opened-or-is-not-refreshed/33562004?noredirect=1#comment54902989_33562004 –

为什么.remove（）在回调函数中不起作用？

回答

相关问题