How to move a <li> from a <ul> ato another <ul> in a separate div using JQuery
Question
So i have two containers which contain separate ul . My objective is to move one of the child <li> from one ul to the other.
I currently have a delete function on the li within the ul using jquery, as below:
//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>
I am really new to this so just trying to personalize a project.
1 answers
solution1
1 ACCPTED 2020-06-24 11:07:18
Instead of removing, you should append the element to the target container, and then use fadeIn to show it again.
//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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
JQuery - How to move a li to another position in the ul? (exchange 2 li's)
Move all li items in a ul to a separate ul
How to move a div inside <ul> on top of <li>
how to move <li> element from one <ul> to another
Finding the ul inside a div and append li tag to that ul using jquery
How to get the separate values from ul li
moving li from one ul to another jQuery
jQuery tabs: how to addClass to a separate UL tab from the tab div?
insert LI to a UL from an existing UL using JQuery
How to remove li from ul within a div
Related Tags