Question

我用jQuery尝试过它并且工作正常

$(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>

但我更喜欢使用普通的Javascript

Answer 1

使用document.querySelectorAll和parentElement.removeChild：

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

注1：您可以使用childNode.remove代替parentElement.removeChild，但要记住所有浏览器都不支持它（例如，IE不支持它全部）：

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

注意2：某些较旧的浏览器也不支持 NodeList.forEach，如果它导致某些问题，您可以始终使用for循环来迭代这些元素。

示例：

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 2

要通过CSS选择器选择元素，请使用：

<强> .querySelector()

这将找到第一个匹配元素并返回节点引用或null（如果没有匹配的节点）。
<强> .querySelectorAll()

这将返回所有匹配元素的节点列表（a.k.a HTML元素集合）或空节点列表（如果没有匹配的元素）。

因此，要查找并收集所有需要删除的<a>元素：

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

而且，在 DOM API （DOM访问的原生API）中，您需要使用 removeChild ，这需要您获得对要删除的元素的父元素的引用。

注意：较新的浏览器可能支持 .remove() 方法，它不需要访问父项并删除指定的元素直接。但是，目前，为了获得最佳兼容性，请使用.removeChild()。

所以，所有这些（这些代码可以合并以减少它，但为了清楚起见，每个部分都显示了这些代码）：

// 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 3

对于旧版浏览器，使用getElementsByTagName并过滤，仅用于完整性

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

执行：

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

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

与https://jsfiddle.net/yr8787dy/一样。无需访问父节点。

使用普通Javascript按属性名称删除元素

4 个答案: