如何删除div中的最后3个div

Question

removing the last 3 divs inside the div using native javascript

It should first look like this:

<div id="name">
      <div>one</div>
      <div>two</div>
      <div>three</div>
      <div>four</div>
      <div>five</div>
</div>

After removing it:

<div id="name">
      <div>one</div>
      <div>two</div>
</div>

I tried removing it by assigning individual id names on them but its impossible to track the changes since its constantly changing and shuffling.

Answer 1

The last three can be identified with .slice(-3) on the node list (when converted to array):

 const parent = document.querySelector("#name"); [...parent.children].slice(-3).forEach(parent.removeChild.bind(parent)); 

 <div id="name"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> 

Answer 2

You can select the last 3 divs with :nth-last-child(-n+3) and delete them in an iteration

 document.querySelectorAll('#name > div:nth-last-child(-n+3)').forEach(n => { n.parentNode.removeChild(n) }) 

 <div id="name"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> 

Answer 3

You can get all children nodes of #name with document.querySelectorAll('#name>div') . The rest should be easy enough:

 function deleteLast3() { var childrens = document.querySelectorAll('#name>div'); for (var index = 0; index < childrens.length; index++) { if (index >= childrens.length - 3) childrens[index].remove(); } } 

 <div id="name"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> <button onclick="deleteLast3()">Delete 3</button> 

Answer 4

Loop through the set in reverse and remove the first 3 you find:

 let divs = document.querySelectorAll("#name > div"); // Get all the child divs // Set up loop to go from highest index to lowest, but not to the first two for(var i = divs.length -1; i > 1; i--){ // Remove node at the current index divs[i].parentNode.removeChild(divs[i]); } 

 <div id="name"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> 

Answer 5

You can use this code:

EDIT: using parentDivDOM.children you retrieve all the direct chilldren of your parent div. Then, starting from the last one, you check if it's a div checking its tag name: if it is, you delete it.

Notice that you also keep track of how many div you have deleted with the count variable.

 const parentDivDOM = document.getElementById("name"); const childrenDOM = parentDivDOM.children; for (let i=childrenDOM.length-1, count=0; i>=0 && count<3; i--) { if (childrenDOM[i].tagName === "DIV") { childrenDOM[i].parentElement.removeChild(childrenDOM[i]); count++; } } 

 <div id="name"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> 

Answer 6

Although the question for javascript I would suggest to do this with jQuery.

 $('#name').find("div").slice(-3).remove(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div id="name"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> 

Hope it helps.

Answer 7

Here is a try

 function deleteLast3() { document.querySelectorAll('#name div') .forEach(function (x, i, self){ if (self.length -3 <= i) x.remove(); }); } 

 <div id="name"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> <button onclick="deleteLast3()">Delete 3</button>