Как удалить родительский UL с помощью Jquery

Question

Моя CMS отображает навигацию как UL. Я хочу взять этот UL и использовать только его часть для боковой навигации. Я пытаюсь удалить родительский UL и показать только вложенный UL с дочерними страницами. Вот пример

<ul id="mainnav">
<li> Main Nav 1 </li>
<li> Main Nav 2 
  <ul id="subnav1">
      <li> Sub Nav 1 </li>
      <li> Sub Nav 2 </li>
      <li> Sub Nav 3 </li>
  </ul>
</li>
<li> Main Nav 3 </li>
</ul>

Что я хотел бы сделать, это показать только UL с идентификатором «subnav1» и удалить оставшуюся часть меню. Я могу просто скрыть основной ul, используя «visibility: none», но меню все еще занимает место. «display: none» скрывает все меню, и я не могу настроить таргетинг только на subnav1 ul. Я надеялся, что jquery позволит мне удалить родительский ul. Дайте мне знать, если у кого-нибудь есть предложение. Спасибо.

Answer 1

Решение основной проблемы:

$("#subnav1").insertBefore($("#mainnav"));
$("#mainnav").remove();

Решение вторичной проблемы: видимость: никто не займет место. Измените положение на относительное, используя css.

Answer 2

Мне нравится ответ pokrate, но я не думаю, что он будет работать так, как написано.

Вот документы на insertBefore: http://docs.jquery.com/Manipulation/insertBefore#selector

Согласно примеру должно быть:

$("#subnav1").insertBefore("#mainnav"); 
$("#mainnav").remove();

Answer 3

jQuery.fn.outerHTML = function(s) {
return (s)
? this.before(s).remove()
: jQuery("<p>").append(this.eq(0).clone()).html();
}


$('#mainnav').outerHTML($('#subnav1').outerHTML());

Это удалит основной UL из DOM.