How to get and remove the parentNode of querySelectorAll

Question

I am trying to target the parent node, which is a div of a link tag(a) in my code, I have tried target.parentNode but that does not work, maybe as I am using querySelectorAll?. My code so far is:

  function remove() {
    var target = document.querySelectorAll('a[data-type="data"]'), i;
     for (i = 0; i < target.length; i++) {
       if (target.length > 1) {
        target[i].remove();
       }
     }
  }
  remove();

Html:

<div class="carousel-slide">
   <a data-type="data" data-type="image">
   <img class="img-responsive" src="./285-603.jpg">
   </a>
</div>

Any idea's?

Answer 1

You could utilize for...of to loop through all elements that were found, then call parentNode.remove() on them:

 function remove() { var anchors = document.querySelectorAll("a[data-type='data']"); console.log("before", anchors.length); // use `for...of` to iterate through all anchor tags for (var anchor of anchors) { // remove the parent node anchor.parentNode.remove(); } console.log( "after", document.querySelectorAll("a[data-type='data']").length ); } remove();

 <div class="carousel-slide"> <a data-type="data" data-type="image"> <img class="img-responsive" draggable="false" src="./285-602.jpg" /> </a> </div> <div class="carousel-slide"> <a data-type="data" data-type="image"> <img class="img-responsive" draggable="false" src="./285-603.jpg" /> </a> </div>

Reference:

• for...of - MDN

Answer 2

You need to use parentNode .

const remove = () => {
  const target = document.querySelectorAll('a[data-type="data"]');
  for (let i = 0; i < target.length; i++) {
    target[i].parentNode.remove();
  }
};
remove();

Answer 3

There is an issue when you are doing querySelectorAll you do no need to define the i

querySelectorAll will get all a[data-type="data"] and the function will remove from the nodes from the DOM

Edit: To delete parent just your parentNode.remove() just use forEach function to get all a tags and remove its parents.

Run snippet below.

 function remove() { var target = document.querySelectorAll('a[data-type="data"]'); target.forEach(function(anchors) { anchors.parentNode.remove(); console.log('a tag with [data-type="data"] = Deleted') }) } remove();

 <div class="carousel-slide"> <a data-type="data" data-type="image"> <img class="img-responsive" draggable="false"> Will be deleted </a> </div> <div class="carousel-slide"> <a data-type="no" data-type="image"> <img class="img-responsive" draggable="false"> Will stay </a> </div>

Answer 4

The reason target.parentNode doesn't work is because target is an array of DOM elements. Array's don't have a parentNode . On the other hand each element in the array does:

var target = document.querySelectorAll('a[data-type="data"]'), i;
for (var i = 0; i < target.length; i++) {
    console.log(target[i].parentNode);
}

Answer 5

 window.onload = () => { btnParent = document.querySelector('#parents'); btnParent.addEventListener('click', () => { const links = document.querySelectorAll('a'); for (let i = 0; i < links.length; i++) { links[i].parentNode.remove(); } }); btnWrapper = document.querySelector('#wrapper'); btnWrapper.addEventListener('click', () => { const links = document.querySelectorAll('a'); if (links && links.length > 0) { links[0].parentNode.parentNode.remove(); } else { console.log('Nothing to delete'); } }); }

 body { font-family: Arial, sans-serif; } p { color: white; }

 <div> <p> <button id="parents">Delete Parents</button> </p> <p> <button id="wrapper">Delete Wrapper</button> </p> <div style="background: red; padding: 20px; display: block;"> <p>Wrapper</p> <div style="background: blue; padding: 20px; display: block; margin-bottom: 10px;"> <p>Parent</p> <a style="background: yellow; padding: 20px; display: block;" href="#">Link</a> </div> <div style="background: blue; padding: 20px; display: block; margin-bottom: 10px;"> <p>Parent</p> <a style="background: yellow; padding: 20px; display: block;" href="#">Link</a> </div> <div style="background: blue; padding: 20px; display: block; margin-bottom: 10px;"> <p>Parent</p> <a style="background: yellow; padding: 20px; display: block;" href="#">Link</a> </div> <div style="background: blue; padding: 20px; display: block; margin-bottom: 10px;"> <p>Parent</p> <a style="background: yellow; padding: 20px; display: block;" href="#">Link</a> </div> </div> </div>