CODEWITHSUNDEEP
javascripthtml
viveksinghggits
viveksinghggits

Reputation: 680

not able to delete all the children of an element with specific class

So, I was trying to delete all the children of an element lets say wrapper that has aurl class, and wrote this code

document.addEventListener("DOMContentLoaded", function (){
	document.getElementById("reload").addEventListener("click", function (){
		var w = document.getElementById("wrapper");
		for(var i=0; i<w.children.length; i++){
			if(w.children[i].classList.contains("aurl")){
				w.removeChild(w.children[i]);
			}
		}
	});
});
<div id="wrapper">
			<div id="reload">
			<span>Reload</span>
			</div>
			<div class="aurl" id="one">
			One
			</div>
			<div class="aurl" id="two">
			Two
			</div>
			<div class="aurl" id="three">
			Three
			</div>
			<div class="aurl" id="four">
			Four
			</div>
			<div class="aurl" id="five">
			Five
			</div>
			<div class="aurl" id="six">
			Six
			</div>
		</div>

when I click on the reload button only one, three, five elements are being deleted and rest are not. Here is my observation after debugging the code, for i=4 value of e is undefined and its getting the alternate elements every time e.g. one, three, five to delete.

Upvotes: 0

Views: 79

Answers (4)

Kirankumar Dafda
Kirankumar Dafda

Reputation: 2384

Simple solution here, just pass the element/class you want to delete from the container

<script>
document.addEventListener("DOMContentLoaded", function (){
    document.getElementById("reload").addEventListener("click", function (){
        var container = document.getElementById("wrapper");
        var elements = container.getElementsByClassName("aurl");

        while (elements[0]) {
            elements[0].parentNode.removeChild(elements[0]);
        }
    });
});
</script>

Here is a JSFiddle demo of it.

Upvotes: 0

Hassan Imam
Hassan Imam

Reputation: 22534

You can use querySelectorAll() and forEach to remove element.

document.addEventListener("DOMContentLoaded", function (){	document.getElementById("reload").addEventListener("click", function (){
  var children = document.querySelectorAll('#wrapper .aurl');
  var parent = document.getElementById('wrapper');

  Array.from(children).forEach(function(child){
    parent.removeChild(child);
  });
 });
});
<div id="wrapper">
  <div id="reload">
    <span>Reload</span>
  </div>
  <div class="aurl" id="one">
  One
  </div>
  <div class="aurl" id="two">
  Two
  </div>
  <div class="aurl" id="three">
  Three
  </div>
  <div class="aurl" id="four">
  Four
  </div>
  <div class="aurl" id="five">
  Five
  </div>
  <div class="aurl" id="six">
  Six
  </div>
</div>

Upvotes: 1

Hauptstro&#223;nKoal
Hauptstro&#223;nKoal

Reputation: 136

Try to run the for Loop reverse, because the children.length decreases.

document.addEventListener("DOMContentLoaded", function (){
	document.getElementById("reload").addEventListener("click", function (){
		var w = document.getElementById("wrapper");
		for(var i=w.children.length-1; i>=0; i--){
			if(w.children[i].classList.contains("aurl")){
				w.removeChild(w.children[i]);
			}
		}
	});
});
<div id="wrapper">
			<div id="reload">
			<span>Reload</span>
			</div>
			<div class="aurl" id="one">
			One
			</div>
			<div class="aurl" id="two">
			Two
			</div>
			<div class="aurl" id="three">
			Three
			</div>
			<div class="aurl" id="four">
			Four
			</div>
			<div class="aurl" id="five">
			Five
			</div>
			<div class="aurl" id="six">
			Six
			</div>
		</div>

Upvotes: 3

vjy tiwari
vjy tiwari

Reputation: 861

I think you have to use childNodes AS following explanation

The difference between childNodes and children, which is that childNodes contains all nodes, including text nodes consisting entirely of whitespace, while children is a collection of just the child nodes that are elements.

I think it may helped you

Upvotes: 0

Related Questions