[英]remove any child element after certain div index by javascript or jquery
i have this html collection, i want if i click on any div class ".sday" any other div that are present after that be remove . 我有这个html集合,我想如果我单击任何div类“ .sday”,则在此之后出现的任何其他div都可以删除。
for example if we click on sday 2 we should keep sday1 and sday 2, and 3 and 4 must delete 例如,如果我们单击第2天,则应保留sday1和sday 2,并且必须删除3和4
my script removing count is ok but it delete wrong div. 我的脚本删除计数是可以的,但是它删除了错误的div。
any idea? 任何想法?
<div id="parent" class="parent">
<div class="room-sheet">
<div class="sday">1</div>
</div>
<div class="room-sheet">
<div class="sday">2</div>
</div>
<div class="room-sheet">
<div class="sday">3</div>
</div>
<div class="room-sheet">
<div class="sday">4</div>
</div>
</div>
script(using jquery) 脚本(使用jQuery)
<script>
$(".sday").click(function(){
console.log("hello");
var parentElement = $(this).parent().parent().find('.room-sheet');
var parentChildernCount = $(this).parent().parent().find('.room-sheet').length;
var elementIndex = $(this).closest('.room-sheet').index();
var dd = parentChildernCount - elementIndex;
for(let i=elementIndex; i < dd; i++){
//note: make sure any element after our index in deleted!!!
$("#parent").find('.room-sheet').children().eq(i).remove();
}
})
</script>
Listen for clicks on a .sday
on the parent, navigate to the parent of the clicked .sday
(a .room-sheet
), call nextAll
to get all subsequent siblings, and .remove()
them: 听上点击
.sday
父,导航所点击的父.sday
(一.room-sheet
),请致电nextAll
让所有后续的兄弟姐妹,和.remove()
他们:
$('#parent').on('click', '.sday', function() { $(this).parent().nextAll().remove(); })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="parent" class="parent"> <div class="room-sheet"> <div class="sday">1</div> </div> <div class="room-sheet"> <div class="sday">2</div> </div> <div class="room-sheet"> <div class="sday">3</div> </div> <div class="room-sheet"> <div class="sday">4</div> </div> </div>
Also, there's no need to require a big library like jQuery for something this simple, you may implement this with native DOM methods, if you like: 同样,不需要像jQuery这样的大型库就可以实现这种简单的操作,如果您愿意,可以使用本机DOM方法实现此功能:
document.querySelector('#parent').addEventListener('click', ({ target }) => { if (!target.matches('.sday')) { return; } const sheet = target.parentElement; while (sheet.nextSibling) { sheet.nextSibling.remove(); } });
<div id="parent" class="parent"> <div class="room-sheet"> <div class="sday">1</div> </div> <div class="room-sheet"> <div class="sday">2</div> </div> <div class="room-sheet"> <div class="sday">3</div> </div> <div class="room-sheet"> <div class="sday">4</div> </div> </div>
Save the current number and the maximum number in variables then just iterate through them, making sure not to delete the clicked one: 将当前数字和最大数字保存在变量中,然后遍历它们,确保不删除单击的数字:
$(".sday").on("click", function() {
let start = parseInt($(this).text());
let finish = parseInt($(".sday").last().text());
for (let i = start + 1; i <= finish; i++) {
$(`.sday:conatins(${i})`).remove();
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.