如何在不使用jQuery的情况下基于子元素的文本选择父元素？

Question

我一直在使用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>

Answer 1

您可以使用.querySelectorAll() for..of回路中，检查.textContent当前的label元素，调用ChildNode.remove()上.parentElement如果发现匹配， break循环

 for (let label of document.querySelectorAll(".BreadBasket .BreadSpec > label")) { if (label.textContent === "lefse") { label.parentElement.remove(); break; } } 

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

如果浏览器支持，则可以使用Array.from() ， Array.prototype.find()

 Array.from(document.querySelectorAll(".BreadBasket .BreadSpec > label")) .find(({textContent}) => textContent === "lefse") .parentElement.remove() 

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

Answer 2

只需使用parentNode DOM属性：

 // Find all the labels that match your criteria var labels = document.querySelectorAll('.BreadBasket .BreadSpec > label'); // Loop over the found elements for(var i = 0; i < labels.length; ++i){ // Test for the condition. indexOf returns -1 if the specified // string is not found, otherwise it returns the index position // of where the string was found. if(labels[i].textContent.indexOf("lefse") > -1){ // When a match is found, get a reference to the parent node var parent = labels[i].parentNode; // There is no "removeParent" method, only "removeChild", so you have // to actually find the parent of the parent to be able to remove the // desired node. So, get the parent of that parent and use the // removeChild() method parent.parentNode.removeChild(parent); } } 

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

Answer 3

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

  }
});

Answer 4

 var liElements=document.getElementsByTagName('LABEL'); for(var i=0; i<liElements.length; i++){ var elem=liElements[i]; if(elem.innerHTML==='lefse'){ var li=elem.parentNode; li.parentNode.removeChild(li); } } 

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