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.

Answer 1

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