We remove child of a certain html element through JQuery via:

$(PARENT_SELECTOR).children(CHILD_SELECTOR).remove()

But how can I make this behave like .splice() method (e.g. removing on the DOM tree the given index and offset). For instance:

1. Remove the last three children. Here I'll most probably use:

   for(var x = 0; x < 3; x++) {
      $(PARENT_SELECTOR).children().last().remove()
   }
   

2. Remove 4th to 6th children. Here I'll use:

   $(PARENT_SELECTOR).children().eq(3).remove()
   $(PARENT_SELECTOR).children().eq(4).remove()
   $(PARENT_SELECTOR).children().eq(5).remove()
   

3. Remove 5 elements starting from the 5th child ( this is the real scenario where I want to have a .splice()-like function for JQuery ):

   var starting = 5,
       index = 5
   
   // I haven't tested this yet.
   for(var x = index + starting; x > index; x--) {
       $(PARENT_SELECTOR).children().eq(x - 1).remove()
   }
   

And the list goes on... I can make my own case-to-case scripts for each scenarios [, that's easy]. I'm just wondering if JQuery has already it's own feature like this-- it will make my scripting shorter and will not make me to repeat writing similar codes.

We remove child of a certain html element through JQuery via:

$(PARENT_SELECTOR).children(CHILD_SELECTOR).remove()

But how can I make this behave like .splice() method (e.g. removing on the DOM tree the given index and offset). For instance:

1. Remove the last three children. Here I'll most probably use:

   for(var x = 0; x < 3; x++) {
      $(PARENT_SELECTOR).children().last().remove()
   }
   

2. Remove 4th to 6th children. Here I'll use:

   $(PARENT_SELECTOR).children().eq(3).remove()
   $(PARENT_SELECTOR).children().eq(4).remove()
   $(PARENT_SELECTOR).children().eq(5).remove()
   

3. Remove 5 elements starting from the 5th child ( this is the real scenario where I want to have a .splice()-like function for JQuery ):

   var starting = 5,
       index = 5
   
   // I haven't tested this yet.
   for(var x = index + starting; x > index; x--) {
       $(PARENT_SELECTOR).children().eq(x - 1).remove()
   }
   

And the list goes on... I can make my own case-to-case scripts for each scenarios [, that's easy]. I'm just wondering if JQuery has already it's own feature like this-- it will make my scripting shorter and will not make me to repeat writing similar codes.

• javascript
• jquery

Share Improve this question Follow edited Aug 14, 2015 at 1:52 jacobsa 6,63922 gold badges3333 silver badges6969 bronze badges asked Aug 6, 2015 at 3:50 GideonGideon 1,65422 gold badges2727 silver badges6464 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I think $.slice is really what you are looking for. Below is the example:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

$( "li" ).slice( 2, 4 ).remove();

Just keep in mind that .slice() starts with index 0, so example above will remove the third to fifth child.

jQuery Slice method selects a subset of elements based on its index. This method is used to limit the selection of elements in a group, by a start and end point: the start parameter is a starting index (starts at 0) from which to create the subset, and the stop parameter is an optional ending point. You can find the better explanation here and here

$(document).ready(function(){
    $("p").slice(1).css("background-color", "red");
    $("p").slice(2,4).remove();
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>para 0.</p>
<p>para 1.</p>
<p>para 2.</p>
<p>para 3.</p>
<p>para 4.</p>