remove any child element after certain div index by javascript or jquery

Question

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 .

for example if we click on sday 2 we should keep sday1 and sday 2, and 3 and 4 must delete

my script removing count is ok but it delete wrong 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)

<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

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:

 $('#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:

 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> 

Answer 2

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