Javascript 如何根据父元素的文本选择它'；没有jQuery的子元素？

我一直在使用jQuery学习基本的javascript功能，但现在我对学习如何使用普通javascript执行相同的操作感兴趣。我一直在寻找关于这个问题的明确答案，但没有找到适合我的情况的适当答案或方向。我的问题是，在没有jQuery的情况下，如何基于父元素的子元素的文本来选择父元素？我想删除标签中文本为“lefse”的父元素

如果我想知道在哪里使用jQuery，我只需做如下操作：

$('.BreadBasket .BreadSpec > label:contains("lefse")').parents('.BreadSpec ').remove();

但我还是想使用普通JS。谢谢大家!

<div class="BreadBasket">
<ul>
    <li class="BreadSpec">
      <label>brioche</label>
      <span>01</span>
    </li>
    <li class="BreadSpec">
      <label>focaccia</label>
      <span>02</span>
    </li>
    <li class="BreadSpec">
      <label>naan</label>
      <span>03</span>
    </li>
    <li class="BreadSpec">
      <label>lefse</label>
      <span>04</span>
    </li>
    <li class="BreadSpec">
      <label>tandoor</label>
      <span>05</span>
    </li>
    <li class="BreadSpec">
      <label>tortilla</label>
      <span>06</span>
    </li>
</ul>

布里奥什
01


福卡西亚
02


印度薄饼
03


莱弗斯
04


坦多尔
05


玉米饼
06

---

您可以使用

.querySelectorAll（）

，

对于

循环中的..，检查当前

标签

元素的

.textContent

，调用

子节点。在
上删除（）
，如果找到匹配项，
中断
循环


for（让document.queryselectoral的标签（“.BreadBasket.BreadSpec>label”））{
如果（label.textContent==“lefse”）{
label.parentElement.remove（）；
打破
}
}



布里奥什
01


福卡西亚
02


印度薄饼
03


莱弗斯
04


坦多尔
05


玉米饼
06

只需使用DOM属性：


//查找符合条件的所有标签
var labels=document.queryselectoral（'.BreadBasket.BreadSpec>label'）；
//循环找到的元素
对于（变量i=0；i-1）{
//找到匹配项后，获取对父节点的引用
var parent=labels[i].parentNode；
//没有“removeParent”方法，只有“removeChild”，所以您有
//要实际查找父级的父级，以便能够删除
//所需节点。因此，获取该父节点的父节点并使用
//removeChild（）方法
parent.parentNode.removeChild（父级）；
}
}



布里奥什
01


福卡西亚
02


印度薄饼
03


莱弗斯
04


坦多尔
05


玉米饼
06


var liElements=document.getElementsByTagName（'LABEL'）；
for（var i=0；i
textContent
具有广泛的支持。实际上没有理由对其进行测试。
innerText
也具有广泛的支持，但它是非标准的。在if语句中使用“>-1”表示什么意思？
var textProp = 'textContent' in document ? 'textContent' : 'innerText';

// directly converting the found 'a' elements into an Array,
// then iterating over that array with Array.prototype.forEach():
[].slice.call(document.querySelectorAll('label'), 0).forEach(function(aEl) {
  // if the text of the aEl Node contains the text 'lefse':
  if (aEl[textProp].indexOf('lefse') > -1) {
    // we update its style:
    aEl.parentNode.remove()

  }
});