JQUERY: remove any <ul> tags with no <li> tags inside it.

JQUERY: remove any <ul> tags with no <li> tags inside it.

This includes any white space or character besides <li> between the <ul> and </ul> tags

Something like this?

$('.right-content-column').find('<ul></ul>').remove();
jeremyllAsked:
Who is Participating?
 
Gurvinder Pal SinghConnect With a Mentor Commented:
or this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<script src="jquery-1.4.2.min.js"></script>
	<script>
		$(document).ready(function(){
			$("ul").each( function(){
				alert($(this).find("li").length);
				if( $(this).find("li").length == 0 )
				{
					$(this).remove();
				}
			} );
		});

	</script>

	<style>
	ul
{
    padding-bottom: 5px;
}

ul li
{
    background-color: red;
}

ul.empty
{
	height:10px;
	width:100px;	
}

</style>
</HEAD>

<BODY>
	<div>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<ul class='empty'> </ul>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

</div>
</BODY>
</HTML>

Open in new window

0
 
Gurvinder Pal SinghCommented:
$("ul").each(function(){
  var html = $(this).html();
  if ( html.length == 0)
  {
    $(this).remove();
  }
});

or

$("ul").each(function(){
  if ( $(this).find("li").length == 0)
  {
    $(this).remove();
  }
});
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
Kiran SonawaneProject LeadCommented:
In following example. All ul tags will be removed
Demo : http://jsfiddle.net/hDZac/1/


<html>
  <head>
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
  <script>
  $(document).ready(function(){
    $('#btn').click(function(){
    $('#tbl ul').remove();
    });
    
  });
  </script>
  <title>Untitled Document</title>
  </head>
  <body>
   <table width="200" border="1" id="tbl">
    <tr>
        <td>
            <ul>
              <li>1</li>
              <li>2</li>
              <li>3</li>
            </ul>
        </td>
        <td>
           <ul>
              <li>4</li>
              <li>5</li>
              <li>6</li>
            </ul>
        </td>
    </tr>
   
</table>
<br>
<input type="button" id="btn" value="Remove UL">

  </body>
  </html>

Open in new window

0
 
jeremyllAuthor Commented:
thanks Gurvinder372,

To include nested UL is it something like this?

            $("ul, ul li ul, ul li ul li ul").each(function(){
                if ( $(this).find('li').length < 1)
                    {
                    $(this).remove();
                    }
                });
0
 
Gurvinder Pal SinghCommented:
not necessarily, if you just want to remove this uls which doesn't have any children items, then no need to mention any nested uls
0
 
jeremyllAuthor Commented:
Below code actually doesn't work

$("ul, ul li ul, ul li ul li ul").each(function(){
                if ( $(this).find('li').length < 1)
                    {
                    $(this).remove();
                    }
                });
0
 
Gurvinder Pal SinghCommented:
did my solution which i suggested in my first 2 replies worked?
0
 
jeremyllAuthor Commented:
I've tried:
$("ul").each(function(){
  if ( $(this).find("li").length == 0)
  {
    $(this).remove();
  }
});

... it makes perfect sense it should work, but it doesn't.

How to I find HTML code that is '<ul></ul>' then remove it using Jquery?

I was hoping to use something like below:

$('.right-content-column').find('<ul></ul>').remove();
0
 
jeremyllAuthor Commented:
I tried both of them

$("ul").each(function(){
  var html = $(this).html();
  if ( html.length == 0)
  {
    $(this).remove();
  }
});

and

$("ul").each(function(){
  if ( $(this).find("li").length == 0)
  {
    $(this).remove();
  }
});

which unfortunately didn't work.
0
 
jeremyllAuthor Commented:
I actually tried below, which works!

  $("ul").each(function(){
                if ( $(this).find("li").length == 0)
                {              
                $(this).css("border","20px solid red");
                }
                });

meaning.... it is displaying big red borders where there are no 'li' in 'ul' tags ?!?

so maybe there's something wrong with this...?

$(this).remove();
0
 
Gurvinder Pal SinghCommented:
check this code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<script src="jquery-1.4.2.min.js"></script>
	<script>
		$(document).ready(function(){
			$("ul").each( function(){
				alert($(this).html().length);
				if( $(this).html().length == 0 )
				{
					$(this).remove();
				}
			} );
		});

	</script>

	<style>
	ul
{
    padding-bottom: 5px;
}

ul li
{
    background-color: red;
}

ul.empty
{
    background-color: green
	height:10px;
	width:100px;	
}

</style>
</HEAD>

<BODY>
	<div>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<ul class='empty'> </ul>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

</div>
</BODY>
</HTML>

Open in new window

0
 
jeremyllAuthor Commented:
I tried that and it certainly works in a new HTML document.

What is really bizzare is that for the code below, the ul with no li disappears in firefox Firebug, but when I go to see View Source it's still there. Bizarre.

                $("ul").each(function(){
                if ($(this).find("li").length == 0) {
                  $(this).remove();
                //$(this).css("border","20px solid red");
                }
                });

Also when I try $(this).empty(); instead of $(this).remove(); the empty UL tags appear back again in Firebug.
0
 
jeremyllAuthor Commented:
how about finding the matching HTML string "<ul></ul>" and removing this HTML string?
0
 
jeremyllAuthor Commented:
I tried   $("ul").each(function(){
                if ($(this).find("li").length == 0) {
               // $(this).remove();
                $(this).css("border","20px solid red");
                }
                });

followed by below which removed the solid red and put the empty UL tags back in

                $("ul:empty").remove();
0
 
Gurvinder Pal SinghCommented:
<<What is really bizzare is that for the code below, the ul with no li disappears in firefox Firebug, but when I go to see View Source it's still there. Bizarre.>>

Ohh, if that is the case, then don't worry, since 'view source' doesn't show the updated code, it shows the code which is fetched from the server.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.