JQuery: delete items after current

Question

I have a question about deleting all items after the current one.

here is the script:

I have a location tree that my users must wade through to get a specific value. I have a SELECT that loads a top level location via ajax. Data has more granular values ​​to narrow the selection down, so I add a new SELECT depending on what the user has selected. When the user gets to the end of the available parameters for the data, I stop adding SELECT and capture the value of the latter, which I do after.

The way I encoded this is to start with one SELECT, which has a top-level location identifier, with a wired connection, and then an “onchange” event handler that goes into my database and grabs the children for this choice, then creates new selection within the current TD.

This continues until none of the children are returned for their final choice. At this point, I can get the identifier of this final location.

This works great if the user decides to change one or two, selects "upstream".

Here is an example of what a user who received a location tree might have (this is SELECT in code):

USA → Ohio → Kuyahoga → Cleveland → District 1

if "District 1" was the last available item in this location chain, I can get it with $ ('# locations select: last'). val (). Wunderbar.

Which doesn’t work so well if the user decides: "Hmm, no, it's not Cuyahoga, after me, but Stow" and changes the third option. What I need to do is delete all the FAVORITES AFTER the selection that has “Cuyahoga”, since now I need to get additional data for “Stow”. Any selections after the previous selection are no longer valid.

The selection that is being processed passes itself in the onchange event, so I have the current item. I tried $ (elem) .after (). Remove (), but this does not work.

Any ideas on how I can remove all SELECTs after the current one?

Thanks!

The structure of the document looks something like this:

<table border id="loctable"> <tr><th>Location:</th><td><select id="loc0" onchange="return UpdateLocationSelect(this);"> <option>choose..</option> <option value="3">USA</option> </select> </td> </tr> 

[incision]

 function UpdateLocationSelect(elem) { // load sub locations for PPID given. IN this case, locations under USA. add options to elem // Also, erase any selects after this one, in case the user has "backed up" his selection $(elem).next().remove(); // Help needed here!! how to remove any SELECTs after this one?? $.ajax({ url: "api.php", dataType: "json", data: { cmd: "sublocs", "pid": elem.value }, async: false, success: function( data, textStatus ) { // results if( $(data).length ) { $('#loctable td').append( "<select onchange='return UpdateLocationSelect(this);'><option>choose..</option></select>"); $.each( data, function( key, val ){ $('#loctable select:last').append( '<option value="'+key+'">'+val+'</option>' ); }); } else { // we've hit the end of this location branch. Alert to check val is right alert( "LocID: " + $('#loctable select:last').val() ); } }, }); return false; } 

Answer 1

 $(elem).nextAll().remove(); 

If you need to specify a selector, you can do this using the same method.

 $(elem).nextAll('select.some-class').remove(); 

Answer 2

To remove the selections that appear after the current selection, simply use:

 var curSelect = $('select').index('select'); $('select').gt(curSelect).remove(); 

Passing a selector to index() means that it will find all the elements in the document that match that selector, instead of providing the index of the element from its element elements.

gt() finds all elements returned by the initial selector with an index greater than the one passed to the curSelect variable, and in this case passes them to the remove() method.

Literature:

• gt() .
• index() .
• remove() .