CODEWITHSUNDEEP
javascriptjquery
Michael Schwartz
Michael Schwartz

Reputation: 8425

Pure JavaScript alternative to jQuery's .remove()

What would be the JS alternative to .remove() from jQuery? I have $("[data-holder=container]").remove(), but need to transfer that to pure JS.

I know if I was working with like a list, for example, I could use .removeChild() but that's not the case for this.

console.log("starting script");

var container = document.querySelector("[data-holder=container]");

if (container.innerHTML.length == 0) {
  container.remove();
  console.log("empty elements removed");
}
body, p {
  margin: 0;
}
p {
  padding: 1em;
}
p:nth-child(even) {
  background: #669;
  color: #ccf;
}
p:nth-child(odd) {
  background: #acf;
}
<p data-holder="container">
  hello world
</p>
<p data-holder="container"></p>
<p data-holder="container"></p>
<p data-holder="container">dont this one</p>
<p data-holder="container"></p>

Upvotes: 2

Views: 6464

Answers (4)

poorly-written-code
poorly-written-code

Reputation: 1073

.remove() is a pure javascript method...

Then .querySelectorAll() to select the elements and .forEach() to loop through them.

document.querySelectorAll('[data-holder="container"]')
  .forEach(function(container) {
    if (!container.innerHTML) { container.remove(); }
  });
<p data-holder="container">
  hello world
</p>
<p data-holder="container"></p>
<p data-holder="container"></p>
<p data-holder="container">dont this one</p>
<p data-holder="container"></p>

Upvotes: 3

samnodier
samnodier

Reputation: 395

If you want to remove all the elements that match certain criteria, just

  • Use JavaScript querySelectorAll() method
  • Iterate through every matched node using Array forEach() method (preference)
  • Use the parentNode using the matched node and remove it.

View the code snippet below from your code.

HTML

<p data-holder="container">
  hello world
</p>
<p data-holder="container"></p>
<p data-holder="container"></p>
<p data-holder="container">dont this one</p>
<p data-holder="container"></p>

CSS

body, p {
  margin: 0;
}
p {
  padding: 1em;
}
p:nth-child(even) {
  background: #669;
  color: #ccf;
}
p:nth-child(odd) {
  background: #acf;
}

console.log("starting script");

var container = document.querySelectorAll("[data-holder=container]");

container.forEach((item) => {
  item.parentNode.removeChild(item);
});

Upvotes: 2

Ganesh More
Ganesh More

Reputation: 21

If you want to remove any DOM element, you can refer it's parent and remove it. In your case, as you are using querySelector, it will only return first P tag and not all P tags with specified attribute

You can remove first element from selector using 

container.parentNode.removeChild(container);

However if you want to remove all tags then use below code

var containers = document.querySelectorAll("[data-holder=container]");
for(var i=0;i < containers.length; i++){
 if (containers[i].innerHTML.length == 0) {
 containers[i].parentNode.removeChild(containers[i]);
 console.log("empty elements removed");
 }
}

Upvotes: 2

Viktor Tabori
Viktor Tabori

Reputation: 2207

Expanding on Ganesh More's answer and JaromandaX's comment:

  • use querySelectorAll to return all matching DOM elements
  • use parentNode.removeChild to remove elements

console.log("starting script");

var container = document.querySelectorAll("[data-holder=container]");

for (var i=0;i<container.length;i++)
  if (container[i].innerHTML.length == 0)
    container[i].parentNode.removeChild(container[i]);

console.log("empty elements removed");
body, p {
  margin: 0;
}
p {
  padding: 1em;
}
p:nth-child(even) {
  background: #669;
  color: #ccf;
}
p:nth-child(odd) {
  background: #acf;
}
<p data-holder="container">
  hello world
</p>
<p data-holder="container"></p>
<p data-holder="container"></p>
<p data-holder="container">dont this one</p>
<p data-holder="container"></p>

Upvotes: 2

Related Questions