jquery - Clone last and append item to closest class -
this bare-bones code on page:
<div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> within each .list-container, i'm trying add new .single-list-item clicking button .add-list-item below it. code using:
$(".add-list-item").on("click", function() { $(".single-list-item").last().clone().appendto(".list-container"); }); this working fine when had structure once on page, working ids (i.e. #list-container), there multiple , i've had change classes, i'm hitting problems. namely, whenever press "add" button, adds new .single-list-item every container.
i believe i'm going need use .closest() in order specify specific container, i'm unsure how "append closest". note, "add" button not within container.
$(".add-list-item").on("click", function() { var $container =$(this).closest('p').prev(".list-container"); $(".single-list-item:last", $container).clone().appendto($container); }); jsfiddle: https://jsfiddle.net/trueblueaussie/3rs2hbo2/
when using templated rows recommend using separate template element hidden somewhere in dom. avoid various problems of duplicating existing content row , edge cases (like deleting last element)
e.g. https://jsfiddle.net/trueblueaussie/3rs2hbo2/1/
where template hidden in non-known script type
<script id="template" type="text/template"> <div class="single-list-item"> <button>remove</button> </div> </script> and code use becomes:
$(".add-list-item").on("click", function() { var $container =$(this).closest('p').prev(".list-container"); $container.append($("#template").html()); });
This page contains the necessary information about game. From here I am get some information.Have
ReplyDeleteyou played the famous akinator unblocked
? If not, you must play it today only as it is a quite amazing game which will give you some fun moments playing it in your busy day schedule
This page contains the necessary information The Samsung Galaxy M52 is going to be published very soon if you feel free you can visit my site Samsung M52 Release Date
ReplyDeleteI am upbeat to locate your recognized method for composing the post. Presently you make it simple for me to comprehend and execute the idea. Much obliged to you for the post Radio Walkie Talkies.
ReplyDeleteThank you for another great article. Where else could anyone get that kind of information in such a perfect way of writing? I have a presentation next week, and I am on the look for such information Please follow my Site link antalya sohbet.
ReplyDeleteThis comment has been removed by the author.
ReplyDelete