Question

i am making navigation bar using <ul> and <li>

i first data like (html)

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

when click on Root Catalog it will replace this all <li> it will like

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

and so on. when you click it will changed and replaced by all new <li>

when you click on <li> it will added to a div=reg_navlist i am using .append of jquery function

then it will like

<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>

i want to remove only those <li> element which is i have clicked & li and coming after it
for example if i have clicked on where <li id=45> then the id=45 and id= 80, id=95, and id=115 will be removed not the id=1 and id=3

i have tried this jQuery code

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

but it is removing all the <li> not the first one

Answer 1

do:

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

See: andSelf() and nextAll()

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