Question

我一直在使用jQuery学习基本的javascript功能，但现在我有兴趣学习如何使用普通的javascript执行相同的操作。我已经找到了明确的答案，但没有找到适合我的情况的答案或方向。我的问题是如何基于它的子元素WITHOUT 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循环

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

如何基于它的子元素WITHOUT jQuery的文本选择父元素？

4 个答案: