jquery remove list item where it is empty

Question

<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--)

score 1 · Answer 1 · answered Feb 17 '21 at 05:39

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>

score 0 · Answer 2 · answered Feb 17 '21 at 05:43

0

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>

answered Feb 17 '21 at 05:43

Raeesh Alam

3,380
1
10
9

@PranavRustagi map method is faster than each method. – Raeesh Alam Feb 17 '21 at 06:01
Wouldn't be `for` much faster then? – Pranav Rustagi Feb 17 '21 at 06:07
@PranavRustagi You can check which method is taking more time like: `console.time('map')` Write map functionality here `console.timeEnd('map')` `console.time('each')` Write each functionality here `console.timeEnd('each')` And open console to see time. – Raeesh Alam Feb 17 '21 at 06:24
No, that's not what I meant. I know `map` executes much faster than `each`. I am asking that would not `for` be better than `map`, as it's executes faster than `map`. What I meant by my first comment to use `each` was that, we should use functions which have that purpose. `filter` is faster than `map`, but it's purpose is different, right? – Pranav Rustagi Feb 17 '21 at 06:30
@PranavRustagi Yes, But when you write coding then faster thing is matter so your single line code `$(".example:has(a[href=''])").remove()` is taking more time to remove than any `map` or `for` or `filter` after document ready. – Raeesh Alam Feb 17 '21 at 06:36
I may not be knowing something so I am looking forward to learn. You are using selectors and so am I. What differs is that, I am selecting only the elements I need to remove, instead of selecting all, and then checking with iterations. Then how come my way becomes slower? – Pranav Rustagi Feb 17 '21 at 06:43

score 0 · Answer 3 · answered Feb 17 '21 at 05:50

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>

jquery remove list item where it is empty

3 Answers3