Remove element by attribute name with plain Javascript

Question

I tried it with jQuery and it was working fine

$(document).ready(function(){
$("a[title='Book'],a[title='Movie'],a[title='Music']").remove();
});

HTML:

<a class="label-block" href="#" rel="tag" title="Book">Book</a>
<a class="label-block" href="#" rel="tag" title="Movie">Movie</a>
<a class="label-block" href="#" rel="tag" title="Music">Music</a>

But I prefer to use plain Javascript

Answer 1

To select an element by a CSS selector, you use:

• .querySelector()

  This will find the first matching element and return a node reference or undefined (if no node was matched).

• .querySelectorAll()

  This will return a node list (aka HTML Element Collection) of all matching elements or an empty node list (if no elements were matched).

So, to find and gather up all your <a> elements that need to be removed:

var anchors =  document.querySelectorAll("a[title='Book'], 
                                          a[title='Movie'],
                                          a[title='Music']");

And, in the DOM API (the native API for DOM access), you need to use removeChild , which requires you to get a reference to the parent element of the element you wish to remove.

NOTE : Newer browsers may support the .remove() method, which doesn't require access to the parent and removes the specified element directly. But, currently, for best compatibility, use .removeChild() .

So, all together (this code could be combined to reduce it, but is shown in each part for clarity):

 // Get reference to nodes to be removed var children = document.querySelectorAll("a[title='Book'], a[title='Movie'], a[title='Music']"); // Turn children node list into actual JavaScript Array // (so that .forEach() can be used successfully in all modern browsers). var childArray = Array.prototype.slice.call(children); // Loop through the child array and get the parent node for // each child, then remove each child childArray.forEach(function(child){ child.parentNode.removeChild(child); });

 <div> <a class="label-block" href="#" rel="tag" title="Book">Book</a> <a class="label-block" href="#" rel="tag" title="Movie">Movie</a> <a class="label-block" href="#" rel="tag" title="Music">Music</a> <!-- This anchor will not be removed because it is not matched by the selector passed to .querySelectorAll() --> <a class="label-block" href="#" rel="tag" title="Other">Other</a> </div>

Answer 2

Use document.querySelectorAll and parentElement.removeChild :

document.querySelectorAll("a[title='Book'],a[title='Movie'],a[title='Music']").forEach(function(e) {
    e.parentElement.removeChild(e);
});

Note 1: You can use childNode.remove instead of parentElement.removeChild , but bear in mind that it is not supported by all browser (IE for example is not supporting it at all):

e.remove();   // instead of e.parentElement.removeChild(e);

Note 2: NodeList.forEach is also not supported by some older browser, if it causes some problem, you could always use a for loop to iterate over the elements.

Example:

 document.querySelectorAll("a[title='Book'],a[title='Movie'],a[title='Music']").forEach(function(e) { e.parentElement.removeChild(e); });

 <a class="label-block" href="#" rel="tag" title="Book">Book</a> <a class="label-block" href="#" rel="tag" title="Movie">Movie</a> <a class="label-block" href="#" rel="tag" title="Other">Other</a> <a class="label-block" href="#" rel="tag" title="Music">Music</a>

Answer 3

For older browsers, using getElementsByTagName and filtering, just for completeness

 [].slice.call(document.getElementsByTagName('a')).filter(function(el) { return ['Book','Movie','Music'].indexOf(el.title) !== -1; }).forEach(function(el) { el.parentNode.removeChild(el); });

 <a class="label-block" href="#" rel="tag" title="Book">Book</a> <a class="label-block" href="#" rel="tag" title="Movie">Movie</a> <a class="label-block" href="#" rel="tag" title="Music">Music</a>

Answer 4

Do as:

var items = document.querySelectorAll("a[title='Book'],a[title='Movie'],a[title='Music']");

[].forEach.call(items, function(item) {
    item.remove();
});

as in https://jsfiddle.net/yr8787dy/ . There is no need to access the parent node.