Pure JavaScript alternative to jQuery's .remove() - Stack Overflow

admin管理员组

文章数量:1296493

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>

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>

• javascript
• jquery

Share Improve this question Follow edited Feb 13, 2018 at 22:39 halfer 20.5k1919 gold badges109109 silver badges202202 bronze badges asked May 5, 2017 at 0:31 Michael SchwartzMichael Schwartz 8,4251414 gold badges8888 silver badges153153 bronze badges 1

• try querySelectorAll to get multiple elements in the response – Jaromanda X Commented May 5, 2017 at 0:33

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

.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>

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

• 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>

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

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

本文标签： Pure JavaScript alternative to jQuery39s remove()Stack Overflow