Usando jQuery para eliminar todos los elementos con una identificación dada

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

$('#myid').remove()

pero, por supuesto, eso solo elimina la primera instancia de myid. ¿Cómo itero sobre TODAS las instancias de myid y las elimino todas? Pensé que el jQuery $.each() El método 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 limpia de hacer esto con JS regular (sin usar jQuery), también estoy abierto a eso. Tal vez el problema es que se supone que las identificaciones son únicas (es decir, se supone que no debe tener varios elementos con id="myid")?

.remove() debe quitarlos todos. Creo que el problema es que estás usando una identificación. Solo se supone que debe haber una Elemento HTML con una ID particular en la página, por lo que jQuery está optimizando y no buscándolos a todos. Utilizar una clase en cambio.

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

Un “id” es un identificador único. Cada vez que se utiliza este atributo en un documento debe tener un valor diferente. Si está usando este atributo como gancho para las hojas de estilo, puede ser más apropiado usar clases (que agrupan elementos) que id (que se usan para identificar exactamente un elemento).

Sin embargo, prueba esto:

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

id del elemento DOM grita ser único. Utilice la clase en su lugar (<span class="myclass">). Para eliminar todo el intervalo con esta clase:

$('.myclass').remove()

si desea eliminar todos los elementos con partes de identificación coincidentes, por ejemplo:

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

prueba esto:

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

no olvides el ‘*’ – esto los eliminará todos a la vez – saludos

Demostración de trabajo

La forma más limpia de hacerlo es usando la API de selectores html5, específicamente querySelectorAll().

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

los querySelectorAll() La función devuelve una matriz de elementos dom que coinciden con una identificación específica. Una vez que haya asignado la matriz devuelta a un varentonces puedes pasarlo como argumento a jquery remove().

Deberías estar usando un class para múltiples elementos como id está destinado a ser un solo elemento. Para responder a su pregunta sobre el .each() sintaxis sin embargo, así es como se vería:

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

Documentación oficial de jQuery aquí.

Como ya se ha dicho, sólo una elemento puede tener un ID específico. Utilice clases en su lugar. Aquí está la versión sin jQuery 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);
    }
}

getElementsByTagName es el método más compatible con varios navegadores que se puede utilizar aquí. getElementsByClassName sería mucho mejor, pero no es compatible con Internet Explorer

Demostración de trabajo