jQuery: eliminar elementos después del actual

Question

Tengo una pregunta sobre la eliminación de todos los elementos después de la actual.

Este es el escenario:

Tengo un árbol de ubicaciones que mis usuarios tienen que vadear a través de llegar a un valor específico. Tengo un SELECT que carga la ubicación de nivel superior a través de ajax. Los datos tienen valores más granulares para reducir la selección, por lo que agrego un nuevo SELECCIONAR dependiendo de lo que elija el usuario. Cuando el usuario llega al final de las opciones disponibles para los datos, dejo de agregar SELECT y tomo el valor de la última, que es lo que busco.

La forma en que codifiqué esto es para comenzar con un SELECT que tiene el ID de ubicación de nivel superior conectado, luego tener un controlador de eventos 'onchange' que va a mi base de datos y toma los niños para esa selección, luego crea la nueva selección dentro del TD actual.

Esto continúa hasta que no se devuelve ningún niño para la última opción. En ese momento, puedo obtener la identificación de esta ubicación final.

Esto funciona muy bien HASTA que el usuario decida cambiar algo que uno o dos selecciona "en sentido ascendente".

He aquí un ejemplo de lo que un usuario que se ha hecho por el árbol de ubicaciones podría tener (estos son SELECTs en el código):

EE.UU. -> Ohio -> Cuyahoga -> Cleveland -> Distrito 1

si el 'Distrito 1' fue el último elemento disponible en esta cadena de ubicaciones, puedo obtenerlo usando $ ('# locations select: last'). val(). Wunderbar.

Lo que no funciona tan bien es si el usuario decide: "Hmm, no, no está buscando Cuyahoga, pero Stow", y cambia la tercera opción de selección. Lo que tengo que hacer es eliminar todas las selecciones DESPUÉS de la selección que tiene 'Cuyahoga', ya que ahora tengo que ir a buscar cualquier información adicional para "Stow". Cualquier selección después de la elección anterior ya no es válida.

La selección que se está manipulando se pasa a sí misma en el evento onchange, de modo que tengo el elemento actual. He intentado con $ (elem) .after(). Remove(), pero eso no funciona.

¿Alguna idea sobre cómo puedo eliminar todos los SELECT después del actual?

Gracias!

La estructura del documento se ve algo como esto:

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

[snip]

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(); 

Si necesita especificar un selector, que puede hacer que el uso del mismo método .

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

Answer 2

Para eliminar esos selecciona que se producen después de que la corriente de selección, basta con utilizar:

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

Pasando un selector para index() significa que va a encontrar todos los elementos del documento que coinciden con ese selector, en vez que proporcionar el índice del elemento entre sus elementos hermanos.

gt() encuentra todos los elementos devueltos por el selector inicial con un índice mayor que el pasado por la variable curSelect y, en este caso, los pasa al método remove().

Referencias:

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