Javascript 删除<；李>；基于子元素上的数据属性的元素

我有以下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> 

---

我试图做的是完全删除/隐藏两个

，它们具有

data test=“male”

值，而不使用jquery。任何帮助/建议都会有所帮助。

如果您以浏览器为目标，则所有浏览器都支持

querySelector

。你可以用

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

要查找所需的

li

有关文件包括：

---

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

[].forEach.call（document.queryselectoral（'li a[data test=“male”]）、函数（el）{
el.parentNode.parentNode.remove（）；
});





您可以使用

方法返回元素的最近祖先
当前元素（或当前元素本身），它与
参数中给出的选择器。如果没有这样一个祖先，它
返回null

由于这仍然是实验性的，请确保检查浏览器支持和本答案中提供的polyfill

如何使用：

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

var el=element.closest（）；


代码片段：


（函数（）{
变量选择器=document.querySelectorAll（“[data test=male]”），
i=0，
len=选择器。长度；
对于（i，len；i





此代码也应适用于旧浏览器

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

var els=document.getElementsByClassName（'abc'）；
对于（变量i=0；i
您的问题可以分为几个子问题：1。使用
数据测试=男性查找
a
。2.对于找到的集合中的每个
a
。3.查找最近的
父级
li
。4.并将其移除。这些子问题中的每一个都在互联网和StackOverflow上被问了很多次。谢谢你，Yeldar，即使是这一步的描述也很有帮助，因为我对javascript非常陌生。我在jquery中成功地做到了这一点，但在纯javascript中我完全迷路了。你使用jquery吗？那只会找到第一个。不管怎样，在我找到它之后，我该如何移除/隐藏它？我很少考虑你的问题。而@Siah的答案更准确。