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:

Any idea's?

user_5862900 · Answer

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();

Reference:

for...of - MDN

user_13675289 · Answer

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();

user_13669048 · Answer

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();


   
   
   Will be deleted
   



   
   
   Will stay

user_1440565 · Answer

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);
}

user_11317072 · Answer

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;
}


  
  
  
  
    
  
  
  Wrapper
  
    Parent
    Link
  
  
    Parent
    Link
  
  
    Parent
    Link
  
  
    Parent
    Link

How to get and remove the parentNode of querySelectorAll

5 Answers