所以我有两个容器，它们包含单独的ul。 我的目标是将一个子从一个ul移动到另一个子。
我目前使用jquery在ul内的li上有一个删除函数，如下所示:
null
//check off specific todos
$("ul").on("click", "li", function(){
$(this).toggleClass("completed");
});
// x to delete todo /mark as complete
$("ul").on("click", "span", function(event){
$(this).parent().fadeOut(500, function(){
$(this).remove();
});
event.stopPropagation();
});
//text input
$("input[type='text']").keypress(function(event){
if(event.which === 13){
var todotext = $(this).val();
$(this).val("");
// create a new LI
$("ul").append("<li><span><i class='fas fa-trash'></i></span> " + todotext + "</li>");
}
});
//toggles input box
$(".fa-plus").click(function(){
$("input[type='text']").fadeToggle();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
<body>
<div id="container">
<h1>Task List <i class="fas fa-plus"></i></h1>
<input placeholder="Add new Task" type="text">
<ul>
<li><span><i class="fas fa-check"></i></span> hello</li>
</ul>
</div>
<div id="container-2">
<h1>Completed Tasks <i class="fas fa-check-circle"></i></h1>
<ul>
</ul>
</div>
</body>
null
我对此真的很陌生，所以只是尝试个性化一个项目。
而不是删除，您应该将元素追加到目标容器，然后使用fadein再次显示它。
null
//check off specific todos
$("ul").on("click", "li", function(){
$(this).toggleClass("completed");
});
// x to delete todo /mark as complete
$("ul").on("click", "span", function(event){
$(this).parent().fadeOut(500, function(){
$(this).appendTo($("#container-2 ul")).fadeIn(500);
});
event.stopPropagation();
});
//text input
$("input[type='text']").keypress(function(event){
if(event.which === 13){
var todotext = $(this).val();
$(this).val("");
// create a new LI
$("ul").append("<li><span><i class='fas fa-trash'></i></span> " + todotext + "</li>");
}
});
//toggles input box
$(".fa-plus").click(function(){
$("input[type='text']").fadeToggle();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
<body>
<div id="container">
<h1>Task List <i class="fas fa-plus"></i></h1>
<input placeholder="Add new Task" type="text">
<ul>
<li><span><i class="fas fa-check"></i></span> hello</li>
</ul>
</div>
<div id="container-2">
<h1>Completed Tasks <i class="fas fa-check-circle"></i></h1>
<ul>
</ul>
</div>
</body>
