所以我有两个容器，其中包含单独的ul。我的目标是将其中一个子<li>从一个ul移动到另一个。
我目前使用 jquery 在 ul 内的 li 上有一个删除函数，如下所示：
//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>
我对此真的很陌生，所以只是尝试个性化一个项目。
不应删除，而应将元素追加到目标容器，然后使用fadeIn再次显示它。
//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>