Remove LI using jQuery

[ziycon]

I have the code below, I need to remove the opening UL and LI and the closing LI and UL and just keep the inner UL.

I've tried the everything I can think of but not being an expert in jQuery is letting me down, any help much appreciated.

<ul>
  <li>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
    </ul>
  </li>
</ul>

[Dormilich]

what you would need to do is (at laest when using DOM)
- copy the inner <ul>
- replace the outer <ul> with the copied node

although don’t ask me how to do that with jQuery …

[ziycon]

Well if you have any other ideas apart from jQuery by all means do tell.

[Dormilich]

assuming there are ids I can hook on (that would be easier in jQuery)

<ul id="outer">
  <li>
    <ul id="inner">
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
    </ul>
  </li>
</ul>

var iul = document.getElementById("inner").cloneNode(true);
var oul = document.getElementById("outer");
oul.parentNode.replaceChild(iul, oul);

jQuery would take care of cross browser issues …

[ziycon]

Is it possible to do it like below as there are no id or classes?

Or something similar like that?

var iul = document.getElementById("div#list ul li ul").cloneNode(true);
var oul = document.getElementById("div#list ul");
oul.parentNode.replaceChild(iul, oul);

[Dormilich]

Is it possible to do it like below as there are no id or classes?

not without jQuery. in pure DOM that doesn’t work. maybe when you check out the jQuery API, you find a method, that does the replace.

[ziycon]

I'm 98% there, last problem is I can't add the LI to the beginning of the UL, the append keeps adding it to the bottom, I've tried using the :first but doesn't seem to work, any ideas?

<script type="text/javascript">
$(document).ready(function() {
  $("div#section_Left_Panel ul").attr("id","outer");
  $("div#section_Left_Panel ul li ul").attr("id","inner");
  var iul = document.getElementById("inner").cloneNode(true);
  var oul = document.getElementById("outer");
  oul.parentNode.replaceChild(iul, oul);
  $("div#section_Left_Panel ul").attr("id","menu");
  $("div#section_Left_Panel ul").append("<li><span class=\"Current\"><a class=\"link_Home\" title=\"Home\" href=\"/\">Link</a></span></li>");
});
</script>

[Dormilich]

last problem is I can't add the LI to the beginning of the UL, the append keeps adding it to the bottom

well, that’s what append() usually does … there might be a jQuery method that works like DOM’s Node.insertBefo re()

[ziycon]

Found it, .prepend() Thanks for all your help with this.

[kovik]

Just to note, using the innerHTML property ($(node).html() , in jQuery) is much faster to perform than DOM manipulation. You could just take the innerHTML of the inner list and replace it into the innerHTML of the outer list.

var parentList = $("#target-list");
var childList = parentList.find("ul");

if (childList.length > 0) {
    parentList.html(childList.first().html());
}

And as a side note, if you are using IDs, there's no need to specify the element type in the selector. You're only slowing jQuery down.

[ziycon]

Hi Kovik, thanks for your input, could you explain that a bit more please, I'm not sure I 100% understand how your codes meant to work?

[kovik]

Basically, parentList is the outer list that you are looking for (for you, it's "#section_Left_ Panel ul"). childList is the <ul> element inside of the target list. What this code does is finds both of these elements. The if-statement checks if the inner list actually exists and, if it does, it takes the HTML from the inner list, which is all of the <li> elements, and replaces the outer list's HTML with it.

So, you go from this:

<ul id="target-list">
    <li>
        <ul>
            <li>foo</li>
            <li>bar</li>
        </ul>
    </li>
</ul>

To this:

<ul id="target-list">
    <li>foo</li>
    <li>bar</li>
</ul>

[ziycon]

Nice one kovik, I understand now, thanks for the tip.