用jQuery删除未使用的li类

Question

Here is my HTML

<li class="single">
 <ul>
       <li class="franchise0001"></li>
       <li class="franchise0002"></li>
       <li class="franchise0003"></li>
       <li class="franchise0004"></li>
       <li class="franchise0005"></li>
       <li class="franchise0006"></li>
       <li class="franchise0007"></li>
       <li class="franchise0008"></li>
       <li class="franchise0009"></li>
       <li class="franchise0010"></li>
       <li class="franchise0011"></li>
       <li class="franchise0012"></li>
       <li class="franchise0013"></li>
       <li class="franchise0014"></li>
 </ul>
</li>

I run a script that finds out if there are franchises signed up for the league, then it places that franchise logo and name in the correct franchise li class. However some franchises are always left empty and never filled. Here is an example of the HTML after the script fills in some information

<li class="single">
 <ul>
   <li><a href="#"><img src=""></a><a>Top Dawg</a></li>
   <li><a href="#"><img src=""></a><a>THEEOhiostate</a></li>
   <li><a href="#"><img src=""></a><a>slambodians</a></li>
   <li><a href="#"><img src=""></a><a>Hollywood Shuffler</a></li>
   <li><a href="#"><img src=""></a><a>Thunderbolts</a></li>
   <li><a href="#"><img src=""></a><a>MeWantee</a></li>
   <li><a href="#"><img src=""></a><a>Cincy Slammers</a></li>
   <li class="franchise0007"></li>
   <li><a href="#"><img src=""></a><a>Mahafaha</a></li>
   <li><a href="#"><img src=""></a><a>SF Drug Lords</a></li>
   <li><a href="#"><img src=""></a><a>Hudy Delight</a></li>
   <li><a href="#"><img src=""></a><a>long shot</a></li>
   <li><a href="#"><img src=""></a><a>Green Guy</a></li>
   <li class="franchise00011"></li>
   <li class="franchise00012"></li>
  </ul>
</li>

I need to remove any empty li not containing an "a" or "img" tag that was generated from the simulation script.

I tried this but it just removes them all , i assume since the HTML has all the li classes empty until script fills them

$("li:empty").remove();

Here is a link to the simulation script http://nitrografixx.com/2014/Nike2014/js/teams_simulation.js

Answer 1

First of all they're called "tags"...

Try this:

$("li:empty").remove();

Answer 2

I see that your script is making an ajax call. You need to do the $("li:empty").remove(); AFTER the ajax call finishes and the li tags have all been transformed. If you do the call to remove the empty li calls without waiting for the ajax call to complete, then it's likely that it will remove ALL of the li tags, since it's only after the ajax call returns that the li tags are modified.

Specifically, add the remover code at the end of your ajax success function as follows:

$.ajax({
   . . .
   success : function(data) {
      . . .
       $.each(data, function(index, element) {
          . . .
       });
       $("li:empty").remove(); // do this only AFTER the li tags have been modified
   );
   . . .
);