I have got two set of lists once complete and one incomplete... If I click on the complete line item, it should be transferred to the incomplete list (prepend) and vice versa.
The code is real simple I am using basically similar code to transfer from incomplete to complete and complete to incomplete.
The incomplete to complete list transfer works.
The complete to incomplete transfer doesn't. (the cloning process doesn't seem to carry through.. It does clone the object makes the change to the cloned object but when I need it to prepend the cloned object to the incomplete list id it doesn't do it.
https://jsfiddle.net/35nbpefz/2/
$("body").on("click", ".incompletetasklist", function () {
var id=$(this).attr('id');
var incomp_task=$(this).clone().addClass('completetasklist').addClass('bg-infolight').removeClass('incompletetasklist');
$('#quicktaskcomplete').prepend(incomp_task);
$("#"+id).remove();
});
// complete task to incomplete task
$("body").on("click", ".completetasklist", function () {
//console.log($(this).attr('id'));
var id=$(this).attr('id');
var comp_task=$(this).clone().addClass('incompletetasklist').removeClass('bg-infolight').removeClass('completetasklist');
//var comp_task=$(this).clone();
//console.log(comp_task);
$('#quicktaskincomplete').prepend(comp_task);
$("#"+id).remove();
});
I created a jsfiddle... I know this must be something so simple but I cannot see it . I have tried prependTo which has an entirely different result. Not too sure what I am doing wrong. It is literally the same code... what am I doing wrong ?
I also noticed that if I interchanged the incomplete div position with the completed div position the second clone function works... but now the first clone function doesnt work... I hope I am making sense here.
The culprit in your code is removing the link after pre-pending it to another list.
The reason is simple: when the same id occurs twice then always the latest one got affected. so $("#"+id).remove(); always removed the pre-pend link only.
Solution: Instaed of $("#"+id).remove(); do $(this).remove();
working snippet:
$("body").on("click", ".incompletetasklist", function() {
var incomp_task = $(this).clone().addClass('completetasklist').addClass('bg-infolight').removeClass('incompletetasklist');
$('#quicktaskcomplete').prepend(incomp_task);
$(this).remove();
});
$("body").on("click", ".completetasklist", function() {
var comp_task = $(this).clone().addClass('incompletetasklist').removeClass('bg-infolight').removeClass('completetasklist');
$('#quicktaskincomplete').prepend(comp_task);
$(this).remove();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<p> INCOMPLETE LIST </p>
<div class="list-group" id="quicktaskcomplete" style="border:1px #000 solid;">
<a href="#" id="12" class="completetasklist list-group-item list-group-item-action bg-infolight">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">edited</h6>
</div>
</a>
<a href="#" id="140" class="completetasklist list-group-item list-group-item-action bg-infolight">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">Toilet cistern coming away from wall. Needs screwing back in</h6>
</div>
</a>
<a href="#" id="482" class="completetasklist list-group-item list-group-item-action bg-infolight">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">The outside tap is leaking; it needs attention ASAP.</h6>
</div>
</a>
<a href="#" id="483" class="completetasklist list-group-item list-group-item-action bg-infolight">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">The front door plate is loose.</h6>
</div>
</a>
<a href="#" id="484" class="completetasklist list-group-item list-group-item-action bg-infolight">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">The floor at the entrance side is very soft; it does not come from the kitchen or bathroom side.</h6>
</div>
</a>
<a href="#" id="485" class="completetasklist list-group-item list-group-item-action bg-infolight">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">HWC door – hinges missing – unsafe with the kids in the house.</h6>
</div>
</a>
<a href="#" id="486" class="completetasklist list-group-item list-group-item-action bg-infolight">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">Bathroom – moldy and rotten</h6>
</div>
</a>
<a href="#" id="487" class="completetasklist list-group-item list-group-item-action bg-infolight">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">RHS corner bedroom - Light fitting hanging loose.</h6>
</div>
</a>
<a href="#" id="488" class="completetasklist list-group-item list-group-item-action bg-infolight">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">Stove; the front of the door is loose.</h6>
</div>
</a>
<a href="#" id="489" class="completetasklist list-group-item list-group-item-action bg-infolight">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">The gutter at the carport is broken</h6>
</div>
</a>
<a href="#" id="490" class="completetasklist list-group-item list-group-item-action bg-infolight">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">62bArc1 62bArc1 this is a test33366</h6>
</div>
</a>
<a href="#" id="491" class="completetasklist list-group-item list-group-item-action bg-infolight">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">The exterior of the property needs a wash</h6>
</div>
</a>
<a href="#" id="492" class="completetasklist list-group-item list-group-item-action bg-infolight">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">Vanity door handles missing</h6>
</div>
</a>
</div>
<p> COMPLETE LIST </p>
<div class="list-group" id="quicktaskincomplete" style="border:1px #000 solid;">
<a href="#" id="493" class="incompletetasklist list-group-item list-group-item-action ">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">Kitchen cupboards: Drawer and doors missing, also knobs missing.</h6>
</div>
</a>
<a href="#" id="494" class="incompletetasklist list-group-item list-group-item-action ">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">Curtains missing</h6>
</div>
</a>
<a href="#" id="1154" class="incompletetasklist list-group-item list-group-item-action ">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">fix fence</h6>
</div>
</a>
<a href="#" id="1155" class="incompletetasklist list-group-item list-group-item-action ">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">62bArc5 testing2222222 fdgffdgd gggg</h6>
</div>
</a>
<a href="#" id="1156" class="incompletetasklist list-group-item list-group-item-action ">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">testinggg</h6>
</div>
</a>
<a href="#" id="1157" class="incompletetasklist list-group-item list-group-item-action ">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">test2</h6>
</div>
</a>
<a href="#" id="1181" class="incompletetasklist list-group-item list-group-item-action ">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">ddd</h6>
</div>
</a>
</div>Another way using data-attributes and single event handler code:
$("body").on("click", ".list-group a", function() {
var cloneTo = $(this).data('clone-to');
var clonedHTML = $(this).clone().toggleClass('completetasklist incompletetasklist').addClass('bg-infolight');
clonedHTML.attr('data-clone-to', clonedHTML.attr('data-clone-to') == 'quicktaskincomplete' ? 'quicktaskcomplete' : 'quicktaskincomplete')
$('#' + cloneTo).prepend(clonedHTML);
$(this).remove();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<p> INCOMPLETE LIST </p>
<div class="list-group" id="quicktaskcomplete" style="border:1px #000 solid;">
<a href="#" id="12" class="completetasklist list-group-item list-group-item-action bg-infolight" data-clone-to="quicktaskincomplete">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">edited</h6>
</div>
</a>
<a href="#" id="140" class="completetasklist list-group-item list-group-item-action bg-infolight" data-clone-to="quicktaskincomplete">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">Toilet cistern coming away from wall. Needs screwing back in</h6>
</div>
</a>
<a href="#" id="482" class="completetasklist list-group-item list-group-item-action bg-infolight" data-clone-to="quicktaskincomplete">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">The outside tap is leaking; it needs attention ASAP.</h6>
</div>
</a>
<a href="#" id="483" class="completetasklist list-group-item list-group-item-action bg-infolight" data-clone-to="quicktaskincomplete">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">The front door plate is loose.</h6>
</div>
</a>
<a href="#" id="484" class="completetasklist list-group-item list-group-item-action bg-infolight" data-clone-to="quicktaskincomplete">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">The floor at the entrance side is very soft; it does not come from the kitchen or bathroom side.</h6>
</div>
</a>
<a href="#" id="485" class="completetasklist list-group-item list-group-item-action bg-infolight" data-clone-to="quicktaskincomplete">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">HWC door – hinges missing – unsafe with the kids in the house.</h6>
</div>
</a>
<a href="#" id="486" class="completetasklist list-group-item list-group-item-action bg-infolight" data-clone-to="quicktaskincomplete">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">Bathroom – moldy and rotten</h6>
</div>
</a>
<a href="#" id="487" class="completetasklist list-group-item list-group-item-action bg-infolight" data-clone-to="quicktaskincomplete">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">RHS corner bedroom - Light fitting hanging loose.</h6>
</div>
</a>
<a href="#" id="488" class="completetasklist list-group-item list-group-item-action bg-infolight" data-clone-to="quicktaskincomplete">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">Stove; the front of the door is loose.</h6>
</div>
</a>
<a href="#" id="489" class="completetasklist list-group-item list-group-item-action bg-infolight" data-clone-to="quicktaskincomplete">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">The gutter at the carport is broken</h6>
</div>
</a>
<a href="#" id="490" class="completetasklist list-group-item list-group-item-action bg-infolight" data-clone-to="quicktaskincomplete">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">62bArc1 62bArc1 this is a test33366</h6>
</div>
</a>
<a href="#" id="491" class="completetasklist list-group-item list-group-item-action bg-infolight" data-clone-to="quicktaskincomplete">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">The exterior of the property needs a wash</h6>
</div>
</a>
<a href="#" id="492" class="completetasklist list-group-item list-group-item-action bg-infolight" data-clone-to="quicktaskincomplete">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">Vanity door handles missing</h6>
</div>
</a>
</div>
<p> COMPLETE LIST </p>
<div class="list-group" id="quicktaskincomplete" style="border:1px #000 solid;">
<a href="#" id="493" class="incompletetasklist list-group-item list-group-item-action " data-clone-to="quicktaskcomplete">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">Kitchen cupboards: Drawer and doors missing, also knobs missing.</h6>
</div>
</a>
<a href="#" id="494" class="incompletetasklist list-group-item list-group-item-action " data-clone-to="quicktaskcomplete">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">Curtains missing</h6>
</div>
</a>
<a href="#" id="1154" class="incompletetasklist list-group-item list-group-item-action " data-clone-to="quicktaskcomplete">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">fix fence</h6>
</div>
</a>
<a href="#" id="1155" class="incompletetasklist list-group-item list-group-item-action " data-clone-to="quicktaskcomplete">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">62bArc5 testing2222222 fdgffdgd gggg</h6>
</div>
</a>
<a href="#" id="1156" class="incompletetasklist list-group-item list-group-item-action " data-clone-to="quicktaskcomplete">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">testinggg</h6>
</div>
</a>
<a href="#" id="1157" class="incompletetasklist list-group-item list-group-item-action " data-clone-to="quicktaskcomplete">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">test2</h6>
</div>
</a>
<a href="#" id="1181" class="incompletetasklist list-group-item list-group-item-action " data-clone-to="quicktaskcomplete">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1" style="font-size: 0.9rem">ddd</h6>
</div>
</a>
</div>