?
Solved

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

Posted on 2011-09-20
16
Medium Priority
?
711 Views
Last Modified: 2012-06-27
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();
0
Comment
Question by:jeremyll
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 7
16 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36571674
$("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
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36571682
0
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36571687
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
Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

 

Author Comment

by:jeremyll
ID: 36571712
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
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36571718
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
 

Author Comment

by:jeremyll
ID: 36571726
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
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36571764
did my solution which i suggested in my first 2 replies worked?
0
 

Author Comment

by:jeremyll
ID: 36571765
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
 

Author Comment

by:jeremyll
ID: 36571768
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
 

Author Comment

by:jeremyll
ID: 36571780
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
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36571783
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
 
LVL 40

Accepted Solution

by:
Gurvinder Pal Singh earned 2000 total points
ID: 36571790
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
 

Author Comment

by:jeremyll
ID: 36571868
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
 

Author Comment

by:jeremyll
ID: 36571894
how about finding the matching HTML string "<ul></ul>" and removing this HTML string?
0
 

Author Comment

by:jeremyll
ID: 36571914
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
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36572005
<<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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question