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。任何帮助/建议都会有所帮助。

Answer 1

您可以使用CSS选择器的强大功能：

nativeElement

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

使用的API：

Answer 2

如果您定位浏览器，则全部支持querySelector。你可以使用

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

找到您需要的li。

相关文件：

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

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

根据孩子的attrribute数据删除<li>元素

4 个答案: