Remove HTML tag using jQuery

Question

I am new on jQuery. I want to remove HTML tag only, not its content. The following is my code

HTML

<ul>
  <li>
    <a href="#">Personal Loans</a>
    <ul>
      <li><a href="#">Secured Loans</a></li>
      <li><a href="#">Unsecured Loans</a></li>
      <li><a href="#">Bad Credit Loans</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Debt Management</a>
    <ul>
      <li><a href="#">Debt Consolidation Loans</a></li>
      <li><a href="#">Credit Card Debt Management</a></li>
      <li><a href="#">IVAs</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Payday Loans</a>
    <ul>
      <li><a href="#">Text Loans</a></li>
      <li><a href="#">Short Term Loans</a></li>
      <li><a href="#">Cash Loan</a></li>
      <li><a href="#">Same Day Loan</a></li>
      <li><a href="#">Instant Loans</a></li>
      <li><a href="#">Quick Loan</a></li>
      <li><a href="#">Cash Advances</a></li>
      <li><a href="#">Fast Loan</a></li>
    </ul>
  </li>
  <li><a href="#">Car Loan</a></li>
  <li><a href="#">Mortgage</a></li>
</ul>

I want to remove the nested <ul> only, but not its children <li>. Is this possible in jQuery? Please help me.

It's not possible since li must be inside ul or other list tag. It will be possible if you replace li with, for example, div. — Pavel Strakhov
– Pavel Strakhov, Commented Nov 24, 2012 at 11:44
What end-result are you hoping for? An li is only a valid child of a ul or ol, so what you're asking becomes: 'how can I use JavaScript to create invalid HTML?' Which is, at best, unwise. — David Thomas
– David Thomas, Commented Nov 24, 2012 at 12:04
actually i want to use this same code on different places on website with different style so that i want to remove these nested '<ul>' on run time — user1849368
– user1849368, Commented Nov 24, 2012 at 12:13

T.J. Crowder · Accepted Answer · 2012-11-24 11:49:43Z

3

You can't put an li inside another li. What you can do, though, is move the li elements from within the ul and put them just after the li that used to contain the ul. Something along these lines:

$("ul > li ul").each(function() {
    var $ul = $(this);
    $ul.children().insertAfter($ul.parent());
    $ul.remove();
});

Live Example | Source

answered Nov 24, 2012 at 11:49

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

T.J. Crowder Over a year ago

@user1849368: Good deal, glad that helped.

Servy · Accepted Answer · 2012-12-06 15:55:38Z

-1

You could call the unwrap() method on your list item.

This will remove the ul element and reparent the li element (and its siblings, if any) under the ul element.

edited Dec 6, 2012 at 15:55

Servy

204k27 gold badges347 silver badges470 bronze badges

answered Nov 24, 2012 at 11:48

Glauco Vinicius

2,6853 gold badges25 silver badges37 bronze badges

1 Comment

T.J. Crowder Over a year ago

"This will remove the 'ul' element and reparent the 'li' element (and its siblings, if any) under the 'ul' element." No, it will remove the ul and attempt to put its li elements within the li that used to contain the ul. The browser may then try its best to put up with the invalid DOM structure, but it's better not to create invalid DOM structures in the first place.

Collectives™ on Stack Overflow

Remove HTML tag using jQuery

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related