Deleting childNodes from parentNode

-1

1 - I am adding Div container using JS but once their Counter crosses '5' i want to delete these Div containers ONE BY ONE from [0] index.

2 - Here below is what i have done so far.in which i am even getting the childNodes's Number but i am not able to delete these nodes..

var counter = 0;



function add_div() {

  var mainDiv = document.getElementById("main-div");



  var divi = document.createElement("DIV");

  divi.setAttribute("ID", "div_id");

  divi.style.backgroundColor = "red";

  divi.style.height = "50px";

  divi.style.width = "50px";

  divi.style.margin = "20px";

  mainDiv.appendChild(divi);

  document.body.appendChild(mainDiv);

  document.body.style.backgroundColor = "blue";

  counter += 1;

  document.getElementById("count").innerHTML = counter;



  //read nodes

  var ch = document.getElementById("main-div").childElementCount;

  document.getElementById("demo").innerHTML = "number of childNodes: " + ch;



  //counter check

  if (counter > 5) {

    mainDiv.removeChild(mainDiv.childNodes[0]);

    // mainDiv.parentNode.removeChild(mainDiv);

  }

}

<button onclick="add_div()">ADD DIV</button>

<div id="count"></div>

<div id="demo"></div>

<div id="main-div"></div>

enter image description here

edited Nov 20 '18 at 21:46

Barmar

429k36252352

asked Nov 20 '18 at 21:37

A_Moeen

915

It's deleting the DIVs like you want, what's the problem?

– Barmar
Nov 20 '18 at 21:47

When you delete the DIV, you never decrement counter. Also, you display number of childnodes before you delete the DIV, so the count includes the deleted DIV.

– Barmar
Nov 20 '18 at 21:49

add a comment |

-1

1 - I am adding Div container using JS but once their Counter crosses '5' i want to delete these Div containers ONE BY ONE from [0] index.

2 - Here below is what i have done so far.in which i am even getting the childNodes's Number but i am not able to delete these nodes..

var counter = 0;



function add_div() {

  var mainDiv = document.getElementById("main-div");



  var divi = document.createElement("DIV");

  divi.setAttribute("ID", "div_id");

  divi.style.backgroundColor = "red";

  divi.style.height = "50px";

  divi.style.width = "50px";

  divi.style.margin = "20px";

  mainDiv.appendChild(divi);

  document.body.appendChild(mainDiv);

  document.body.style.backgroundColor = "blue";

  counter += 1;

  document.getElementById("count").innerHTML = counter;



  //read nodes

  var ch = document.getElementById("main-div").childElementCount;

  document.getElementById("demo").innerHTML = "number of childNodes: " + ch;



  //counter check

  if (counter > 5) {

    mainDiv.removeChild(mainDiv.childNodes[0]);

    // mainDiv.parentNode.removeChild(mainDiv);

  }

}

<button onclick="add_div()">ADD DIV</button>

<div id="count"></div>

<div id="demo"></div>

<div id="main-div"></div>

enter image description here

edited Nov 20 '18 at 21:46

Barmar

429k36252352

asked Nov 20 '18 at 21:37

A_Moeen

915

It's deleting the DIVs like you want, what's the problem?

– Barmar
Nov 20 '18 at 21:47

When you delete the DIV, you never decrement counter. Also, you display number of childnodes before you delete the DIV, so the count includes the deleted DIV.

– Barmar
Nov 20 '18 at 21:49

add a comment |

-1

1 - I am adding Div container using JS but once their Counter crosses '5' i want to delete these Div containers ONE BY ONE from [0] index.

2 - Here below is what i have done so far.in which i am even getting the childNodes's Number but i am not able to delete these nodes..

var counter = 0;



function add_div() {

  var mainDiv = document.getElementById("main-div");



  var divi = document.createElement("DIV");

  divi.setAttribute("ID", "div_id");

  divi.style.backgroundColor = "red";

  divi.style.height = "50px";

  divi.style.width = "50px";

  divi.style.margin = "20px";

  mainDiv.appendChild(divi);

  document.body.appendChild(mainDiv);

  document.body.style.backgroundColor = "blue";

  counter += 1;

  document.getElementById("count").innerHTML = counter;



  //read nodes

  var ch = document.getElementById("main-div").childElementCount;

  document.getElementById("demo").innerHTML = "number of childNodes: " + ch;



  //counter check

  if (counter > 5) {

    mainDiv.removeChild(mainDiv.childNodes[0]);

    // mainDiv.parentNode.removeChild(mainDiv);

  }

}

<button onclick="add_div()">ADD DIV</button>

<div id="count"></div>

<div id="demo"></div>

<div id="main-div"></div>

enter image description here

edited Nov 20 '18 at 21:46

Barmar

429k36252352

asked Nov 20 '18 at 21:37

A_Moeen

915

1 - I am adding Div container using JS but once their Counter crosses '5' i want to delete these Div containers ONE BY ONE from [0] index.

2 - Here below is what i have done so far.in which i am even getting the childNodes's Number but i am not able to delete these nodes..

var counter = 0;



function add_div() {

  var mainDiv = document.getElementById("main-div");



  var divi = document.createElement("DIV");

  divi.setAttribute("ID", "div_id");

  divi.style.backgroundColor = "red";

  divi.style.height = "50px";

  divi.style.width = "50px";

  divi.style.margin = "20px";

  mainDiv.appendChild(divi);

  document.body.appendChild(mainDiv);

  document.body.style.backgroundColor = "blue";

  counter += 1;

  document.getElementById("count").innerHTML = counter;



  //read nodes

  var ch = document.getElementById("main-div").childElementCount;

  document.getElementById("demo").innerHTML = "number of childNodes: " + ch;



  //counter check

  if (counter > 5) {

    mainDiv.removeChild(mainDiv.childNodes[0]);

    // mainDiv.parentNode.removeChild(mainDiv);

  }

}

<button onclick="add_div()">ADD DIV</button>

<div id="count"></div>

<div id="demo"></div>

<div id="main-div"></div>

enter image description here

var counter = 0;



function add_div() {

  var mainDiv = document.getElementById("main-div");



  var divi = document.createElement("DIV");

  divi.setAttribute("ID", "div_id");

  divi.style.backgroundColor = "red";

  divi.style.height = "50px";

  divi.style.width = "50px";

  divi.style.margin = "20px";

  mainDiv.appendChild(divi);

  document.body.appendChild(mainDiv);

  document.body.style.backgroundColor = "blue";

  counter += 1;

  document.getElementById("count").innerHTML = counter;



  //read nodes

  var ch = document.getElementById("main-div").childElementCount;

  document.getElementById("demo").innerHTML = "number of childNodes: " + ch;



  //counter check

  if (counter > 5) {

    mainDiv.removeChild(mainDiv.childNodes[0]);

    // mainDiv.parentNode.removeChild(mainDiv);

  }

}

<button onclick="add_div()">ADD DIV</button>

<div id="count"></div>

<div id="demo"></div>

<div id="main-div"></div>

var counter = 0;



function add_div() {

  var mainDiv = document.getElementById("main-div");



  var divi = document.createElement("DIV");

  divi.setAttribute("ID", "div_id");

  divi.style.backgroundColor = "red";

  divi.style.height = "50px";

  divi.style.width = "50px";

  divi.style.margin = "20px";

  mainDiv.appendChild(divi);

  document.body.appendChild(mainDiv);

  document.body.style.backgroundColor = "blue";

  counter += 1;

  document.getElementById("count").innerHTML = counter;



  //read nodes

  var ch = document.getElementById("main-div").childElementCount;

  document.getElementById("demo").innerHTML = "number of childNodes: " + ch;



  //counter check

  if (counter > 5) {

    mainDiv.removeChild(mainDiv.childNodes[0]);

    // mainDiv.parentNode.removeChild(mainDiv);

  }

}

<button onclick="add_div()">ADD DIV</button>

<div id="count"></div>

<div id="demo"></div>

<div id="main-div"></div>

javascript html nodes

edited Nov 20 '18 at 21:46

Barmar

429k36252352

asked Nov 20 '18 at 21:37

A_Moeen

915

edited Nov 20 '18 at 21:46

Barmar

429k36252352

asked Nov 20 '18 at 21:37

A_Moeen

915

edited Nov 20 '18 at 21:46

Barmar

429k36252352

edited Nov 20 '18 at 21:46

Barmar

429k36252352

edited Nov 20 '18 at 21:46

Barmar

429k36252352

asked Nov 20 '18 at 21:37

A_Moeen

915

asked Nov 20 '18 at 21:37

A_Moeen

915

asked Nov 20 '18 at 21:37

A_Moeen

915

It's deleting the DIVs like you want, what's the problem?

– Barmar
Nov 20 '18 at 21:47

When you delete the DIV, you never decrement counter. Also, you display number of childnodes before you delete the DIV, so the count includes the deleted DIV.

– Barmar
Nov 20 '18 at 21:49

add a comment |

It's deleting the DIVs like you want, what's the problem?

– Barmar
Nov 20 '18 at 21:47

When you delete the DIV, you never decrement counter. Also, you display number of childnodes before you delete the DIV, so the count includes the deleted DIV.

– Barmar
Nov 20 '18 at 21:49

It's deleting the DIVs like you want, what's the problem?

– Barmar
Nov 20 '18 at 21:47

When you delete the DIV, you never decrement counter. Also, you display number of childnodes before you delete the DIV, so the count includes the deleted DIV.

– Barmar
Nov 20 '18 at 21:49

add a comment |

1 Answer
1

active

oldest

votes

I first decremented your counter to update for both negative and positive values. I then set a flag to detect if your code was decrementing or not. When counter reached 5, decrement is set to true, where when counter is moving towards 5, decrement is set to false.

Then your div's were added to an array, where we use a for loop to traverse through the array, removing a div one by one, until we reach 0, where decrement is set back to false;

var counter = 0;



 let decrement = false;

function add_div() {

  if(!decrement){

    var mainDiv = document.getElementById("main-div");



  var divi = document.createElement("DIV");

  divi.setAttribute("ID", "div_id");

  divi.style.backgroundColor = "red";

  divi.style.height = "50px";

  divi.style.width = "50px";

  divi.style.margin = "20px";

  mainDiv.appendChild(divi);

  document.body.appendChild(mainDiv);

  document.body.style.backgroundColor = "blue";

  counter ++;

  document.getElementById("count").innerHTML = counter;





 

  }

  

  //counter check

  if (counter > 5) {

    decrement = true;

  }

  if(counter <= 0){

      decrement = false;

    }

  if(decrement){

    counter--; //decrement counter

    let holder = ;                                     //place div ID's in array

    document.getElementById("count").innerHTML = counter; //update counter

    let div = document.querySelector('#div_id');           //grab div

    holder.push(div);                                        //push to array

    for(let i = 0; i < 5; i++){

     holder[i].parentNode.removeChild(holder[i]) //removes child

    }

   

  }

  

}

<button onclick="add_div()">ADD DIV</button>

<div id="count"></div>

<div id="demo"></div>

<div id="main-div"></div>

answered Nov 20 '18 at 23:36

Jim Ciaston

12213

Thanks for the answer ! i didn't thought about adding flag :)

– A_Moeen
Nov 21 '18 at 9:23

No problem (: Glad to help

– Jim Ciaston
Nov 21 '18 at 15:39

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53401953%2fdeleting-childnodes-from-parentnode%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Then your div's were added to an array, where we use a for loop to traverse through the array, removing a div one by one, until we reach 0, where decrement is set back to false;

var counter = 0;



 let decrement = false;

function add_div() {

  if(!decrement){

    var mainDiv = document.getElementById("main-div");



  var divi = document.createElement("DIV");

  divi.setAttribute("ID", "div_id");

  divi.style.backgroundColor = "red";

  divi.style.height = "50px";

  divi.style.width = "50px";

  divi.style.margin = "20px";

  mainDiv.appendChild(divi);

  document.body.appendChild(mainDiv);

  document.body.style.backgroundColor = "blue";

  counter ++;

  document.getElementById("count").innerHTML = counter;





 

  }

  

  //counter check

  if (counter > 5) {

    decrement = true;

  }

  if(counter <= 0){

      decrement = false;

    }

  if(decrement){

    counter--; //decrement counter

    let holder = ;                                     //place div ID's in array

    document.getElementById("count").innerHTML = counter; //update counter

    let div = document.querySelector('#div_id');           //grab div

    holder.push(div);                                        //push to array

    for(let i = 0; i < 5; i++){

     holder[i].parentNode.removeChild(holder[i]) //removes child

    }

   

  }

  

}

<button onclick="add_div()">ADD DIV</button>

<div id="count"></div>

<div id="demo"></div>

<div id="main-div"></div>

answered Nov 20 '18 at 23:36

Jim Ciaston

12213

Thanks for the answer ! i didn't thought about adding flag :)

– A_Moeen
Nov 21 '18 at 9:23

No problem (: Glad to help

– Jim Ciaston
Nov 21 '18 at 15:39

add a comment |

Then your div's were added to an array, where we use a for loop to traverse through the array, removing a div one by one, until we reach 0, where decrement is set back to false;

var counter = 0;



 let decrement = false;

function add_div() {

  if(!decrement){

    var mainDiv = document.getElementById("main-div");



  var divi = document.createElement("DIV");

  divi.setAttribute("ID", "div_id");

  divi.style.backgroundColor = "red";

  divi.style.height = "50px";

  divi.style.width = "50px";

  divi.style.margin = "20px";

  mainDiv.appendChild(divi);

  document.body.appendChild(mainDiv);

  document.body.style.backgroundColor = "blue";

  counter ++;

  document.getElementById("count").innerHTML = counter;





 

  }

  

  //counter check

  if (counter > 5) {

    decrement = true;

  }

  if(counter <= 0){

      decrement = false;

    }

  if(decrement){

    counter--; //decrement counter

    let holder = ;                                     //place div ID's in array

    document.getElementById("count").innerHTML = counter; //update counter

    let div = document.querySelector('#div_id');           //grab div

    holder.push(div);                                        //push to array

    for(let i = 0; i < 5; i++){

     holder[i].parentNode.removeChild(holder[i]) //removes child

    }

   

  }

  

}

<button onclick="add_div()">ADD DIV</button>

<div id="count"></div>

<div id="demo"></div>

<div id="main-div"></div>

answered Nov 20 '18 at 23:36

Jim Ciaston

12213

Thanks for the answer ! i didn't thought about adding flag :)

– A_Moeen
Nov 21 '18 at 9:23

No problem (: Glad to help

– Jim Ciaston
Nov 21 '18 at 15:39

add a comment |

Then your div's were added to an array, where we use a for loop to traverse through the array, removing a div one by one, until we reach 0, where decrement is set back to false;

var counter = 0;



 let decrement = false;

function add_div() {

  if(!decrement){

    var mainDiv = document.getElementById("main-div");



  var divi = document.createElement("DIV");

  divi.setAttribute("ID", "div_id");

  divi.style.backgroundColor = "red";

  divi.style.height = "50px";

  divi.style.width = "50px";

  divi.style.margin = "20px";

  mainDiv.appendChild(divi);

  document.body.appendChild(mainDiv);

  document.body.style.backgroundColor = "blue";

  counter ++;

  document.getElementById("count").innerHTML = counter;





 

  }

  

  //counter check

  if (counter > 5) {

    decrement = true;

  }

  if(counter <= 0){

      decrement = false;

    }

  if(decrement){

    counter--; //decrement counter

    let holder = ;                                     //place div ID's in array

    document.getElementById("count").innerHTML = counter; //update counter

    let div = document.querySelector('#div_id');           //grab div

    holder.push(div);                                        //push to array

    for(let i = 0; i < 5; i++){

     holder[i].parentNode.removeChild(holder[i]) //removes child

    }

   

  }

  

}

<button onclick="add_div()">ADD DIV</button>

<div id="count"></div>

<div id="demo"></div>

<div id="main-div"></div>

answered Nov 20 '18 at 23:36

Jim Ciaston

12213

Then your div's were added to an array, where we use a for loop to traverse through the array, removing a div one by one, until we reach 0, where decrement is set back to false;

var counter = 0;



 let decrement = false;

function add_div() {

  if(!decrement){

    var mainDiv = document.getElementById("main-div");



  var divi = document.createElement("DIV");

  divi.setAttribute("ID", "div_id");

  divi.style.backgroundColor = "red";

  divi.style.height = "50px";

  divi.style.width = "50px";

  divi.style.margin = "20px";

  mainDiv.appendChild(divi);

  document.body.appendChild(mainDiv);

  document.body.style.backgroundColor = "blue";

  counter ++;

  document.getElementById("count").innerHTML = counter;





 

  }

  

  //counter check

  if (counter > 5) {

    decrement = true;

  }

  if(counter <= 0){

      decrement = false;

    }

  if(decrement){

    counter--; //decrement counter

    let holder = ;                                     //place div ID's in array

    document.getElementById("count").innerHTML = counter; //update counter

    let div = document.querySelector('#div_id');           //grab div

    holder.push(div);                                        //push to array

    for(let i = 0; i < 5; i++){

     holder[i].parentNode.removeChild(holder[i]) //removes child

    }

   

  }

  

}

<button onclick="add_div()">ADD DIV</button>

<div id="count"></div>

<div id="demo"></div>

<div id="main-div"></div>

var counter = 0;



 let decrement = false;

function add_div() {

  if(!decrement){

    var mainDiv = document.getElementById("main-div");



  var divi = document.createElement("DIV");

  divi.setAttribute("ID", "div_id");

  divi.style.backgroundColor = "red";

  divi.style.height = "50px";

  divi.style.width = "50px";

  divi.style.margin = "20px";

  mainDiv.appendChild(divi);

  document.body.appendChild(mainDiv);

  document.body.style.backgroundColor = "blue";

  counter ++;

  document.getElementById("count").innerHTML = counter;





 

  }

  

  //counter check

  if (counter > 5) {

    decrement = true;

  }

  if(counter <= 0){

      decrement = false;

    }

  if(decrement){

    counter--; //decrement counter

    let holder = ;                                     //place div ID's in array

    document.getElementById("count").innerHTML = counter; //update counter

    let div = document.querySelector('#div_id');           //grab div

    holder.push(div);                                        //push to array

    for(let i = 0; i < 5; i++){

     holder[i].parentNode.removeChild(holder[i]) //removes child

    }

   

  }

  

}

<button onclick="add_div()">ADD DIV</button>

<div id="count"></div>

<div id="demo"></div>

<div id="main-div"></div>

var counter = 0;



 let decrement = false;

function add_div() {

  if(!decrement){

    var mainDiv = document.getElementById("main-div");



  var divi = document.createElement("DIV");

  divi.setAttribute("ID", "div_id");

  divi.style.backgroundColor = "red";

  divi.style.height = "50px";

  divi.style.width = "50px";

  divi.style.margin = "20px";

  mainDiv.appendChild(divi);

  document.body.appendChild(mainDiv);

  document.body.style.backgroundColor = "blue";

  counter ++;

  document.getElementById("count").innerHTML = counter;





 

  }

  

  //counter check

  if (counter > 5) {

    decrement = true;

  }

  if(counter <= 0){

      decrement = false;

    }

  if(decrement){

    counter--; //decrement counter

    let holder = ;                                     //place div ID's in array

    document.getElementById("count").innerHTML = counter; //update counter

    let div = document.querySelector('#div_id');           //grab div

    holder.push(div);                                        //push to array

    for(let i = 0; i < 5; i++){

     holder[i].parentNode.removeChild(holder[i]) //removes child

    }

   

  }

  

}

<button onclick="add_div()">ADD DIV</button>

<div id="count"></div>

<div id="demo"></div>

<div id="main-div"></div>

answered Nov 20 '18 at 23:36

Jim Ciaston

12213

answered Nov 20 '18 at 23:36

Jim Ciaston

12213

answered Nov 20 '18 at 23:36

Jim Ciaston

12213

answered Nov 20 '18 at 23:36

Jim Ciaston

12213

Thanks for the answer ! i didn't thought about adding flag :)

– A_Moeen
Nov 21 '18 at 9:23

No problem (: Glad to help

– Jim Ciaston
Nov 21 '18 at 15:39

add a comment |

Thanks for the answer ! i didn't thought about adding flag :)

– A_Moeen
Nov 21 '18 at 9:23

No problem (: Glad to help

– Jim Ciaston
Nov 21 '18 at 15:39

Thanks for the answer ! i didn't thought about adding flag :)

– A_Moeen
Nov 21 '18 at 9:23

No problem (: Glad to help

– Jim Ciaston
Nov 21 '18 at 15:39

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky