Usando jquery para eliminar todos los elementos con un ID dado

Question

Tengo un formulario con varios tramos con id = "myid". Me gustaría poder eliminar todos los elementos con este ID del DOM, y creo que jQuery es la mejor manera de hacerlo. Me di cuenta de cómo utilizar el método $ .Remove() para eliminar una instancia de este id, simplemente haciendo:

$('#myid').remove() 

pero por supuesto que sólo elimina la primera instancia de myid. ¿Cómo iterar sobre TODAS las instancias de myid y eliminarlas todas? Pensé que el método jquery $ .each() podría ser el camino, pero no puedo descifrar la sintaxis para iterar sobre todas las instancias de myid y eliminarlas todas.

Si hay una manera clara de hacer esto con JS regular (no usando jQuery) estoy abierto a eso también. Tal vez el problema es que se supone que los identificadores son únicos (es decir, se supone que no debes tener múltiples elementos con id = "myid")?

Gracias,

Chris

Answer 1

.remove() debe eliminar a todos ellos. Creo que el problema es que estás usando una identificación. Solo se supone que debe haber un elemento HTML con un ID particular en la página, por lo que jQuery está optimizando y no buscando todos. Use una clase en su lugar.

Answer 2

Todos los elementos deben tener una identificadores únicos, por lo que no debe haber más de un elemento con #myid

Un "id" es un identificador único. Cada vez que se usa este atributo en un documento, debe tener un valor diferente. Si está utilizando este atributo como gancho para hojas de estilo, puede ser más apropiado usar clases (qué elementos de grupo) que id (que se usan para identificar exactamente un elemento).

Neverthless, intente esto:

$("span[id=myid]").remove(); 

Answer 3

Identificación del elemento dom gritar ser único. Use clase en su lugar (<span class='myclass'>). Para eliminar toda vano con esta clase:

$('.myclass').remove() 

Answer 4

Como ya se ha dicho, sólo uno elemento puede tener un ID específico. Use clases en su lugar. Aquí es jQuery libre de la versión para eliminar los nodos:

var form = document.getElementById('your-form-id'); 
var spans = form.getElementsByTagName('span'); 

for(var i = spans.length; i--;) { 
    var span = spans[i]; 
    if(span.className.match(/\btheclass\b/)) { 
     span.parentNode.removeChild(span); 
    } 
} 

getElementsByTagNameis the most cross-browser-compatible method que se pueden utilizar aquí. getElementsByClassName sería mucho mejor, pero no es compatible con Internet Explorer < = IE 8.

Working Demo

Answer 5

si desea eliminar todos los elementos que se combina con piezas de identificación, por ejemplo:

<span id='myID_123'> 
<span id='myID_456'> 
<span id='myID_789'> 

probar esto:

$("span[id*=myID]").remove(); 

no se olvide el '*' - esto los eliminará a todos a la vez - vítores

Working Demo

Answer 6

Debe usar un class para elementos múltiples ya que un id está destinado a ser un solo elemento. Para responder a su pregunta sobre la sintaxis .each() embargo, esto es lo que se vería así:

$('#myID').each(function() { 
    $(this).remove(); 
}); 

Oficial documentación de jQuery here.

Answer 7

La forma más limpia de hacerlo es mediante el uso de selectores html5 api, específicamente querySelectorAll().

var contentToRemove = document.querySelectorAll("#myid"); 
$(contentToRemove).remove(); 

La función querySelectorAll() devuelve una matriz de elementos DOM que coincidan con una ID específica. Una vez que haya asignado la matriz devuelta a var, puede pasarla como argumento a jquery remove().