title: How to remove li tag by data attribute using jquery
body: <p>I want to remove li tag by data attribute.</p>
  
  <blockquote>
    <p>I want to remove 1st ul of child li which has class name like second Base when click. </p>
  </blockquote>
  
  <p><strong>My code looks like as below</strong></p>
  
  <pre><code>&lt;div class="box-ul"&gt;
    &lt;ul data-id="Base" class="left"&gt;
      &lt;li&gt;Base&lt;/li&gt;
      &lt;li class="second Base"&gt;
        &lt;span data-addedname="SignatureBread" class="close-btn"&gt;Signature Bread&lt;a href="#" class="close"&gt;&lt;/a&gt;&lt;/span&gt;
        &lt;span data-addedname="Lettuce" class="close-btn"&gt;Lettuce&lt;a href="#" class="close"&gt;&lt;/a&gt;&lt;/span&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;ul data-id="Core Filling" class="left"&gt;
      &lt;li&gt;Core Filling&lt;/li&gt;
      &lt;li class="second CoreFilling"&gt;
        &lt;span data-addedname="Steak" class="close-btn"&gt;Steak&lt;a href="#" class="close"&gt;&lt;/a&gt;&lt;/span&gt;
        &lt;span data-addedname="CrispyChecken" class="close-btn"&gt;Crispy Checken&lt;a href="#" class="close"&gt;&lt;/a&gt;&lt;/span&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;ul data-id="Spreads &amp;amp; Cheeses" class="left"&gt;
      &lt;li&gt;Spreads &amp;amp; Cheeses&lt;/li&gt;
      &lt;li class="second SpreadsCheeses"&gt;&lt;span data-addedname="HomemadeHommos(Spread)" class="close-btn"&gt;Homemade Hommos (Spread)&lt;a href="#" class="close"&gt;&lt;/a&gt;&lt;/span&gt;
        &lt;span data-addedname="ZaatarWithOliveOil(Spread)" class="close-btn"&gt;Zaatar With Olive Oil (Spread)&lt;a href="#" class="close"&gt;&lt;/a&gt;&lt;/span&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;ul data-id="Classic Ingredients" class="left"&gt;
      &lt;li&gt;Classic Ingredients&lt;/li&gt;
      &lt;li class="second ClassicIngredients"&gt;&lt;span data-addedname="Lettuce" class="close-btn"&gt;Lettuce&lt;a href="#" class="close"&gt;&lt;/a&gt;&lt;/span&gt;&lt;span data-addedname="Tomato" class="close-btn"&gt;Tomato&lt;a href="#" class="close"&gt;&lt;/a&gt;&lt;/span&gt;&lt;span data-addedname="Cucumber" class="close-btn"&gt;Cucumber&lt;a href="#" class="close"&gt;&lt;/a&gt;&lt;/span&gt;
        &lt;span data-addedname="Pickles" class="close-btn"&gt;Pickles
          &lt;a href="#" class="close"&gt;&lt;/a&gt;
          &lt;/span&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;ul data-id="Premium Ingredients" class="left"&gt;
      &lt;li&gt;Premium Ingredients&lt;/li&gt;
      &lt;li class="second PremiumIngredients"&gt;
        &lt;span data-addedname="SundriedTomato" class="close-btn"&gt;Sundried Tomato&lt;a href="#" class="close"&gt;&lt;/a&gt;&lt;/span&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;ul data-id="Sauces" class="left"&gt;
      &lt;li&gt;Sauces&lt;/li&gt;
      &lt;li class="second Sauces"&gt;
        &lt;span data-addedname="Ketchup*(Classic)" class="close-btn"&gt;Ketchup* (Classic)&lt;a href="#" class="close"&gt;&lt;/a&gt;&lt;/span&gt;
        &lt;span data-addedname="Mayo(Classic)" class="close-btn"&gt;Mayo (Classic)&lt;a href="#" class="close"&gt;&lt;/a&gt;&lt;/span&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>I want to like this output. Here remove li of first ul.</p>
  </blockquote>
  
  <pre><code>&lt;div class="box-ul"&gt;
    &lt;ul data-id="Base" class="left"&gt;
      &lt;li&gt;Base&lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;ul data-id="Core Filling" class="left"&gt;
      &lt;li&gt;Core Filling&lt;/li&gt;
      &lt;li class="second CoreFilling"&gt;
        &lt;span data-addedname="Steak" class="close-btn"&gt;Steak&lt;a href="#" class="close"&gt;&lt;/a&gt;&lt;/span&gt;
        &lt;span data-addedname="CrispyChecken" class="close-btn"&gt;Crispy Checken&lt;a href="#" class="close"&gt;&lt;/a&gt;&lt;/span&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;ul data-id="Spreads &amp;amp; Cheeses" class="left"&gt;
      &lt;li&gt;Spreads &amp;amp; Cheeses&lt;/li&gt;
      &lt;li class="second SpreadsCheeses"&gt;
        &lt;span data-addedname="HomemadeHommos(Spread)" class="close-btn"&gt;Homemade Hommos (Spread)&lt;a href="#" class="close"&gt;&lt;/a&gt;&lt;/span&gt;
        &lt;span data-addedname="ZaatarWithOliveOil(Spread)" class="close-btn"&gt;Zaatar With Olive Oil (Spread)&lt;a href="#" class="close"&gt;&lt;/a&gt;&lt;/span&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;ul data-id="Classic Ingredients" class="left"&gt;
      &lt;li&gt;Classic Ingredients&lt;/li&gt;
      &lt;li class="second ClassicIngredients"&gt;
        &lt;span data-addedname="Lettuce" class="close-btn"&gt;Lettuce&lt;a href="#" class="close"&gt;&lt;/a&gt;&lt;/span&gt;&lt;span data-addedname="Tomato" class="close-btn"&gt;Tomato&lt;a href="#" class="close"&gt;&lt;/a&gt;&lt;/span&gt;
        &lt;span data-addedname="Cucumber" class="close-btn"&gt;Cucumber&lt;a href="#" class="close"&gt;&lt;/a&gt;&lt;/span&gt;
        &lt;span data-addedname="Pickles" class="close-btn"&gt;Pickles
          &lt;a href="#" class="close"&gt;&lt;/a&gt;
          &lt;/span&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;ul data-id="Premium Ingredients" class="left"&gt;
      &lt;li&gt;Premium Ingredients&lt;/li&gt;
      &lt;li class="second PremiumIngredients"&gt;
        &lt;span data-addedname="SundriedTomato" class="close-btn"&gt;Sundried Tomato&lt;a href="#" class="close"&gt;&lt;/a&gt;&lt;/span&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;ul data-id="Sauces" class="left"&gt;
      &lt;li&gt;Sauces&lt;/li&gt;
      &lt;li class="second Sauces"&gt;&lt;span data-addedname="Ketchup*(Classic)" class="close-btn"&gt;Ketchup* (Classic)&lt;a href="#" class="close"&gt;&lt;/a&gt;&lt;/span&gt;&lt;span data-addedname="Mayo(Classic)" class="close-btn"&gt;Mayo (Classic)&lt;a href="#" class="close"&gt;&lt;/a&gt;&lt;/span&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>