CODEWITHSUNDEEP
javascripthtmljquery
JK1993
JK1993

Reputation: 138

How to move a <li> from a <ul> ato another <ul> in a separate div using JQuery

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.

Upvotes: 0

Views: 63

Answers (1)

Greedo
Greedo

Reputation: 3559

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>

Upvotes: 1

Related Questions