如何在不使用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>

- wallrouse

Answer 1

你可以使用.querySelectorAll()、for...of循环，检查当前元素的.textContent，如果匹配成功，则在.parentElement上调用ChildNode.remove()，并使用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>

- guest271314

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>

- Scott Marcus

---

在if语句中使用"> -1"是什么意思？ - wallrouse

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

  }
});

- 18zehn

---

textContent 有广泛的支持。没有理由去测试它。innerText 也有广泛的支持，但是它是非标准的。 - Scott Marcus

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>

- LellisMoon