Question

我想通过数据属性删除li标记。

我想在点击时删除第一个具有类名的第二个ul li。

我的代码如下所示

<div class="box-ul">
  <ul data-id="Base" class="left">
    <li>Base</li>
    <li class="second Base">
      <span data-addedname="SignatureBread" class="close-btn">Signature Bread<a href="#" class="close"></a></span>
      <span data-addedname="Lettuce" class="close-btn">Lettuce<a href="#" class="close"></a></span>
    </li>
  </ul>

  <ul data-id="Core Filling" class="left">
    <li>Core Filling</li>
    <li class="second CoreFilling">
      <span data-addedname="Steak" class="close-btn">Steak<a href="#" class="close"></a></span>
      <span data-addedname="CrispyChecken" class="close-btn">Crispy Checken<a href="#" class="close"></a></span>
    </li>
  </ul>

  <ul data-id="Spreads &amp; Cheeses" class="left">
    <li>Spreads &amp; Cheeses</li>
    <li class="second SpreadsCheeses"><span data-addedname="HomemadeHommos(Spread)" class="close-btn">Homemade Hommos (Spread)<a href="#" class="close"></a></span>
      <span data-addedname="ZaatarWithOliveOil(Spread)" class="close-btn">Zaatar With Olive Oil (Spread)<a href="#" class="close"></a></span>
    </li>
  </ul>

  <ul data-id="Classic Ingredients" class="left">
    <li>Classic Ingredients</li>
    <li class="second ClassicIngredients"><span data-addedname="Lettuce" class="close-btn">Lettuce<a href="#" class="close"></a></span><span data-addedname="Tomato" class="close-btn">Tomato<a href="#" class="close"></a></span><span data-addedname="Cucumber" class="close-btn">Cucumber<a href="#" class="close"></a></span>
      <span data-addedname="Pickles" class="close-btn">Pickles
        <a href="#" class="close"></a>
        </span>
    </li>
  </ul>

  <ul data-id="Premium Ingredients" class="left">
    <li>Premium Ingredients</li>
    <li class="second PremiumIngredients">
      <span data-addedname="SundriedTomato" class="close-btn">Sundried Tomato<a href="#" class="close"></a></span>
    </li>
  </ul>

  <ul data-id="Sauces" class="left">
    <li>Sauces</li>
    <li class="second Sauces">
      <span data-addedname="Ketchup*(Classic)" class="close-btn">Ketchup* (Classic)<a href="#" class="close"></a></span>
      <span data-addedname="Mayo(Classic)" class="close-btn">Mayo (Classic)<a href="#" class="close"></a></span>
    </li>
  </ul>

</div>

我想要这个输出。这里删除第一个ul的li。

<div class="box-ul">
  <ul data-id="Base" class="left">
    <li>Base</li>
  </ul>

  <ul data-id="Core Filling" class="left">
    <li>Core Filling</li>
    <li class="second CoreFilling">
      <span data-addedname="Steak" class="close-btn">Steak<a href="#" class="close"></a></span>
      <span data-addedname="CrispyChecken" class="close-btn">Crispy Checken<a href="#" class="close"></a></span>
    </li>
  </ul>

  <ul data-id="Spreads &amp; Cheeses" class="left">
    <li>Spreads &amp; Cheeses</li>
    <li class="second SpreadsCheeses">
      <span data-addedname="HomemadeHommos(Spread)" class="close-btn">Homemade Hommos (Spread)<a href="#" class="close"></a></span>
      <span data-addedname="ZaatarWithOliveOil(Spread)" class="close-btn">Zaatar With Olive Oil (Spread)<a href="#" class="close"></a></span>
    </li>
  </ul>

  <ul data-id="Classic Ingredients" class="left">
    <li>Classic Ingredients</li>
    <li class="second ClassicIngredients">
      <span data-addedname="Lettuce" class="close-btn">Lettuce<a href="#" class="close"></a></span><span data-addedname="Tomato" class="close-btn">Tomato<a href="#" class="close"></a></span>
      <span data-addedname="Cucumber" class="close-btn">Cucumber<a href="#" class="close"></a></span>
      <span data-addedname="Pickles" class="close-btn">Pickles
        <a href="#" class="close"></a>
        </span>
    </li>
  </ul>

  <ul data-id="Premium Ingredients" class="left">
    <li>Premium Ingredients</li>
    <li class="second PremiumIngredients">
      <span data-addedname="SundriedTomato" class="close-btn">Sundried Tomato<a href="#" class="close"></a></span>
    </li>
  </ul>

  <ul data-id="Sauces" class="left">
    <li>Sauces</li>
    <li class="second Sauces"><span data-addedname="Ketchup*(Classic)" class="close-btn">Ketchup* (Classic)<a href="#" class="close"></a></span><span data-addedname="Mayo(Classic)" class="close-btn">Mayo (Classic)<a href="#" class="close"></a></span>
    </li>
  </ul>
</div>

Answer 1

https://jsfiddle.net/926vogLk/

$('li.second.Base').click(function() {
    $(this).remove();
});

或

如果你想删除ul的第一个li

$('li.second.Base').click(function() {
    $(this).prev().remove();
});

Answer 2

如果您只想删除第一个ul，请尝试@Akhsay提到的解决方案。或者，如果要删除具有特定类或数据属性的任何ul，请执行此操作。

$("ul[data-id=Base]").find("li.base").remove()

或

$("li.Base").remove()

Answer 3

我不确定我是否理解正确但是： $（ “li.second.Base”）。父（）。remove（）方法可能会帮助你

Answer 4

  $('.second').on('click',function(){
    
    $(this).fadeOut(300,function(){$(this).remove() });
  
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-ul">


                 <ul data-id="Base" class="left">
                    <li>Base</li>
                    <li class="second Base"><span data-addedname="SignatureBread" class="close-btn">Signature Bread<a href="#" class="close"></a></span><span data-addedname="Lettuce" class="close-btn">Lettuce<a href="#" class="close"></a></span></li>
                  </ul>

                 <ul data-id="Core Filling" class="left">
                    <li>Core Filling</li>
                    <li class="second CoreFilling"><span data-addedname="Steak" class="close-btn">Steak<a href="#" class="close"></a></span><span data-addedname="CrispyChecken" class="close-btn">Crispy Checken<a href="#" class="close"></a></span></li>
                  </ul>

                 <ul data-id="Spreads &amp; Cheeses" class="left">
                    <li>Spreads &amp; Cheeses</li>
                    <li class="second SpreadsCheeses"><span data-addedname="HomemadeHommos(Spread)" class="close-btn">Homemade Hommos (Spread)<a href="#" class="close"></a></span><span data-addedname="ZaatarWithOliveOil(Spread)" class="close-btn">Zaatar With Olive Oil (Spread)<a href="#" class="close"></a></span></li>
                  </ul>

                 <ul data-id="Classic Ingredients" class="left">
                    <li>Classic Ingredients</li>
                    <li class="second ClassicIngredients"><span data-addedname="Lettuce" class="close-btn">Lettuce<a href="#" class="close"></a></span><span data-addedname="Tomato" class="close-btn">Tomato<a href="#" class="close"></a></span><span data-addedname="Cucumber" class="close-btn">Cucumber<a href="#" class="close"></a></span><span data-addedname="Pickles" class="close-btn">Pickles<a href="#" class="close"></a></span></li>
                  </ul>

                 <ul data-id="Premium Ingredients" class="left">
                    <li>Premium Ingredients</li>
                    <li class="second PremiumIngredients"><span data-addedname="SundriedTomato" class="close-btn">Sundried Tomato<a href="#" class="close"></a></span></li>
                  </ul>

                 <ul data-id="Sauces" class="left">
                    <li>Sauces</li>
                    <li class="second Sauces"><span data-addedname="Ketchup*(Classic)" class="close-btn">Ketchup* (Classic)<a href="#" class="close"></a></span><span data-addedname="Mayo(Classic)" class="close-btn">Mayo (Classic)<a href="#" class="close"></a></span></li>
                  </ul>

</div>

Answer 5

$(function() {
    $('body').on('click', function() {
        $('.box-ul').find('ul').find('li.Base:first').remove();
    });
});

如何使用jquery通过data属性删除li标签

5 个答案: