1. 首頁
  2. 問答
  3. 如何使用jquery通過數據屬性刪除li標籤

如何使用jquery通過數據屬性刪除li標籤

2016-03-09 119 views
1

我想通過數據屬性刪除li標籤。如何使用jquery通過數據屬性刪除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>

來源

2016-03-09 CBA

+0

像這樣'$（ '箱UL UL：第一 '）。找到（' 基地'）刪除（）' – Akshay

+0

謝謝阿克沙伊。但它只適用於第一次沒有任何其他的李。 – CBA

+0

你可以在那裏打印你需要的輸出嗎？ – Deep

回答

0

我不知道如果我hunderstood正確的，但： $（ 「li.second.Base」）父（）刪除（） 可以幫助你

來源

2016-03-09 07:16:56

+0

這將刪除整個UL，他只是想刪除'

  • ...
    • ' – Hydrospanners

    +0

    然後只是：$（「li.second.Base」）。remove（） –

    1

    如果你想。只刪除第一個ul然後嘗試@Akhsay提到的解決方案。或者，如果你想刪除任何具有特定類或數據屬性的ul，那麼做到這一點。

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

    或者

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

    來源

    2016-03-09 07:19:42

    2

    https://jsfiddle.net/926vogLk/

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

    ，或者如果你想刪除UL

    的第一李

    來源

    2016-03-09 07:21:33 WRDev

    +0

    我是不知道他所要求的 – WRDev

    +0

    我同意。很難辨別他想要的東西。這將做我認爲的工作。 – Hydrospanners

    +0

    可能是..他想要刪除ul的第一個號碼 – WRDev

    0 

    $('.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>

    來源

    2016-03-09 08:04:19

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

    來源

    2016-03-09 08:20:42

    +4

    只能回答​​代碼，並不總是鼓勵。請提供一些解釋。 – Nitish

    +0

    如果你想刪除第一個裏面有類名Base的點擊時， –

    相關問題

     相關問題