CODEWITHSUNDEEP
jqueryhtml-listsremove-if
Chico T
Chico T

Reputation: 21

jquery remove list item where it is empty

<ul id="myid">
<li class="example"><a href="New-Orleans">New Orleans</a></li>
<li class="example"><a href></a></li>
<li class="example"><a href="Miami">Miami</a></li>
<li class="example"><a href></a></li>
</ul>

I need to remove the li elements where the text of the anchor is blank.

How would i go about selecting this element? $(--what selector here--)

Upvotes: 2

Views: 48

Answers (3)

Pranav Rustagi
Pranav Rustagi

Reputation: 2731

Shortest way :

$(".example:has(a[href=''])").remove()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="myid">
  <li class="example"><a href="New-Orleans">New Orleans</a></li>
  <li class="example"><a href></a></li>
  <li class="example"><a href="Miami">Miami</a></li>
  <li class="example"><a href></a></li>
</ul>

Upvotes: 0

Raeesh Alam
Raeesh Alam

Reputation: 3480

You can check empty of anchor and then remove parent element. Something like below snippet.

 $(document).ready(function () {
      $('#myid .example a').map(function(i,v) {
          $(this).is(':empty')?$(this).parent().remove():''; 
      });
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="myid">
    <li class="example"><a href="New-Orleans">New Orleans</a></li>
    <li class="example"><a href></a></li>
    <li class="example"><a href="Miami">Miami</a></li>
    <li class="example"><a href></a></li>
</ul>

Upvotes: 0

Swati
Swati

Reputation: 28522

You can try like this :

$(".example > a[href='']").closest('li').remove()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="myid">
  <li class="example"><a href="New-Orleans">New Orleans</a></li>
  <li class="example">
    <a href></a>
  </li>
  <li class="example"><a href="Miami">Miami</a></li>
  <li class="example">
    <a href></a>
  </li>
</ul>

Upvotes: 1

Related Questions