Проблема с удалением LI с помощью JQuery

Question

Я делаю навигационную панель используя <ul> а также <li>

я первые данные, как (HTML)

  <ul id="menu_xml_txt">
     <li id="1"> Root Catalog </li>
 </ul>

когда нажимаете на Root Catalog это заменит все это <li> это понравится

<ul id="menu_xml_txt">
 <li id="2">Apparel</li> 
 <li id="3">Accessories</li>
</ul>

и так далее. при нажатии она будет изменена и заменена на все новые <li>

когда вы нажимаете на <li> это будет добавлено к div=reg_navlist я использую .append функции jquery

тогда понравится

<ul id="reg_navlist">
 <li id="1">Root Catalog</li>  
 <li id="3">Accessories</li> 
 <li id="45">bla bla..</li> 
 <li id="80">bla bla..</li> 
 <li id="95">bla bla..</li> 
 <li id="115">bla bla..</li> 
 </ul>

я хочу удалить только те <li> элемент, который я нажал & li и идет после него, например, если я нажал на где <li id=45> тогда id=45 и id= 80, id=95 и id=115 будут удалены, а не id = 1 и id=3

я пробовал этот код JQuery

 j('#region_navlist li').live('click', function() {
    var cliked_id = j(this).attr('id');
    j('#region_nav li:not(:first)').remove();
});

но это удаляет все <li> не первый

Answer 1

Делать:

j('#region_navlist li').on('click', function() {
    j(this).nextAll().andSelf().remove();
});

Смотрите: andSelf () и nextAll()

Note:- .live() is deprecated you use .on() if version 1.7