根据子元素的数据属性删除<li>元素

Question

我可以看到以下HTML代码：

<li><div class="abc"><a href="https://www.google.com" data-test="male">John</a></div></li>
<li><div class="abc"><a href="https://www.facebook.com" data-test="female">Maria</a></div></li>
<li><div class="abc"><a href="https://www.instagram" data-test="male">Peter</a></div></li> 

我想要做的是完全删除/隐藏两个<li>，它们具有data-test="male"的值，而无需使用jquery。任何帮助/建议都将有所帮助。

- Greg Greg

---

你的问题可以分解为几个子问题：

1. 找到具有 data-test=male 的 a。
2. 对于找到的每一个 a。
3. 找到最近的父级 li。
4. 然后将其删除。

这些子问题在互联网和StackOverflow上已经被很多人问过了。 - Yeldar Kurmangaliyev

谢谢Yeldar，即使是这个步骤的描述也帮了我很多，因为我在JavaScript方面真的很新。我设法在jQuery中完成了这个任务，但在纯JavaScript中我完全迷失了。 - Greg Greg

你使用jQuery吗？ - Jeremie

Answer 1

你可以利用CSS选择器的强大功能:

[].forEach.call(document.querySelectorAll('li a[data-test="male"]'), function(el) {
  el.parentNode.parentNode.remove();
});

<li>
  <div class="abc"><a href="https://www.google.com" data-test="male">John</a></div>
</li>
<li>
  <div class="abc"><a href="https://www.facebook.com" data-test="female">Maria</a></div>
</li>
<li>
  <div class="abc"><a href="https://www.instagram" data-test="male">Peter</a></div>
</li>

APIs使用：

• document.querySelectorAll()
• Function.prototype.call()
• Array.prototype.forEach()
• Node.parentNode
• ChildNode.remove()

注意：请勿删除HTML标签。

- Siah

Answer 2

如果你的目标浏览器都支持querySelector，那么你可以使用。

{parentDom}.querySelector('a[data-test="male"]').parentNode.parentNode

找到你需要的li。

相关文档：

1. querySelector
2. parentNode

- shuizhongyuemin

---

那只会找到第一个。不管怎样，找到之后，我该如何删除/隐藏它？ - user663031

我对你的问题不太关心，@Siah的答案更正确。 - shuizhongyuemin

Answer 3

您可以使用 Element.closest 方法。

Element.closest() 方法返回与参数中给定的选择器匹配的当前元素（或当前元素本身）的最近祖先。如果不存在这样的祖先，则返回 null。

由于这仍处于实验阶段，请确保在此答案中检查浏览器支持here和提供的 polyfill。

如何使用：

var el = element.closest(<[css selector]>);

---

代码片段：

(function() {
  var selectors = document.querySelectorAll('[data-test=male]'),
    i = 0,
    len = selectors.length;

  for (i, len; i < len; i++) {
    var current = selectors[i];
    current.closest('li').remove();
  }
})();

<li>
  <div class="abc"><a href="https://www.google.com" data-test="male">John</a></div>
</li>
<li>
  <div class="abc"><a href="https://www.facebook.com" data-test="female">Maria</a></div>
</li>
<li>
  <div class="abc"><a href="https://www.instagram" data-test="male">Peter</a></div>
</li>

---

对于不支持此功能的浏览器，您可以使用 MDN 提供的以下 polyfill：

if (window.Element && !Element.prototype.closest) {
    Element.prototype.closest = 
    function(s) {
        var matches = (this.document || this.ownerDocument).querySelectorAll(s),
            i,
            el = this;
        do {
            i = matches.length;
            while (--i >= 0 && matches.item(i) !== el) {};
        } while ((i < 0) && (el = el.parentElement)); 
        return el;
    };
}

- Ricky Ruiz

Answer 4

这段代码应该也能在旧版浏览器上运行

var els = document.getElementsByClassName('abc');
for (var i=0; i< els.length; i++){
    if (els[i].firstChild.getAttribute('data-test') === 'male') {
        els[i].parentNode.parentNode.removeChild(els[i].parentNode);
    }
}

- razorxan