在 javascript 或 jquery 的某些 div 索引之后删除任何 child 元素

Question

我有这个htmlcollection，如果我点击任何divclass“.sday”我想要 在 之后 存在的任何其他 div 将被删除。

比如我们点击sday 2我们应该保留sday1和sday 2，而3和4必须删除

我的脚本删除计数没问题，但删除错误 div。

有什么想法吗？

<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>

脚本（使用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>

Answer 1

将当前数字和最大数字保存在变量中，然后遍历它们，确保不要删除点击的那个：

$(".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();
  }
});

Answer 2

监听父级 .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>

此外，不需要像 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>