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.

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.

• javascript

• And what code have you tried ? – mrid Commented Feb 23, 2019 at 19:14

7 Answers 7

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>

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>

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>

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>

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>

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>

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

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

<script src="https://cdnjs.cloudflare./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.