删除每个li中的第一个元素

Question

我想删除每个li元素中的第一个元素，但我的代码只删除第一个li中的a元素，而不是所有li中的a元素。

下面是一个例子。

我有这个

<ul class="myclass">
 <li class="product-category product">
  <a href="#"></a> <---Remove this element
  <a href="">
   all product info here
  </a>
 </li>
 <li class="product-category product">
  <a href="#"></a> <---Remove this element
  <a href="">
   all product info here
  </a>
 </li>
 <li class="product-category product">
  <a href="#"></a> <---Remove this element
  <a href="">
   all product info here
  </a>
 </li>
</ul>

jQuery("li.product-category>a").first().remove();

Answer 1

您可以使用each()这样做

​

$("li.product-category").each(function() {
  $(this).find("a").first().remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="myclass">
 <li class="product-category product">
 <a href="#"></a>
  <a href="">
   all product info here
  </a>
 </li>
 <li class="product-category product">
  <a href="#"></a>
  <a href="">
   all product info here
  </a>
 </li>
 <li class="product-category product">
  <a href="#"></a> 
   <a href="">all product info here
  </a>
 </li>
</ul>

​

Answer 2

一个循环会让它工作。

​

jQuery("li.product-category").each(function(){
    $(this).find("a").first().remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="myclass">
 <li class="product-category product">
  <a href="#">aac</a> <---Remove this element
  <a href="">
   all product info here
  </a>
 </li>
 <li class="product-category product">
  <a href="#">aad</a> <---Remove this element
  <a href="">
   all product info here
  </a>
 </li>
 <li class="product-category product">
  <a href="#">eaa</a> <---Remove this element
  <a href="">
   all product info here
  </a>
 </li>
</ul>

​

Answer 3

你可以使用类似这样的东西

​

let list = document.querySelectorAll('.product')
for (let item of list){
item.children[0].remove()
}

<ul class="myclass">
 <li class="product-category product">
  <a href="#">del</a>
  <a href="">
   all product info here
  </a>
 </li>
 <li class="product-category product">
  <a href="#">del</a>
  <a href="">
   all product info here
  </a>
 </li>
 <li class="product-category product">
  <a href="#">del</a> 
  <a href="">
   all product info here
  </a>
 </li>
</ul>

​