web-dev-qa-db-fra.com

Utiliser jquery pour supprimer tous les éléments avec un identifiant donné

J'ai un formulaire avec plusieurs portées avec id = "myid". Je voudrais pouvoir supprimer tous les éléments avec cet identifiant du DOM, et je pense que jQuery est la meilleure façon de le faire. J'ai compris comment utiliser la méthode $ .remove () pour supprimer une instance de cet identifiant, simplement en faisant:

$('#myid').remove()

mais bien sûr, cela ne supprime que la première instance de myid. Comment puis-je parcourir toutes les instances de myid et les supprimer toutes? J'ai pensé que la méthode jquery $ .each () pourrait être le chemin, mais je ne peux pas comprendre la syntaxe pour itérer sur toutes les instances de myid et les supprimer toutes.

S'il existe un moyen propre de le faire avec JS normal (sans utiliser jQuery), je suis ouvert à cela aussi. Peut-être que le problème est que les identifiants sont censés être uniques (c'est-à-dire que vous n'êtes pas censé avoir plusieurs éléments avec id = "myid")?

Merci,

Chris

javascriptjquerygetelementbyid
45
Chris

.remove() devrait les supprimer tous. Je pense que le problème est que vous utilisez une pièce d'identité. Il n'y a que supposé qu'il y ait n élément HTML avec un ID particulier sur la page, donc jQuery optimise et ne les recherche pas tous. Utilisez plutôt une classe.

66
mpen

Tous vos éléments doivent avoir un ID unique, il ne doit donc pas y avoir plus d'un élément avec #myid

Un "id" est un identifiant unique. Chaque fois que cet attribut est utilisé dans un document, il doit avoir une valeur différente. Si vous utilisez cet attribut comme crochet pour les feuilles de style, il peut être plus approprié d'utiliser des classes (qui regroupent les éléments) que id (qui sont utilisés pour identifier exactement un élément).

Néanmoins, essayez ceci:

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

l'identifiant de l'élément dom doit être unique. Utilisez plutôt la classe (<span class='myclass'>). Pour supprimer toute la plage avec cette classe:

$('.myclass').remove()
14
Minh Nguyen

si vous souhaitez supprimer tous les éléments avec des pièces ID correspondantes, par exemple:

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

essaye ça:

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

n'oubliez pas le '*' - cela les supprimera tous en même temps - cheers

Démo de travail

8
PernerOl

Vous devez utiliser un class pour plusieurs éléments car un id est censé être un seul élément. Pour répondre à votre question sur la syntaxe .each(), voici à quoi cela ressemblerait:

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

Documentation JQuery officielle ici .

6
Peter

La façon la plus propre de le faire est d'utiliser les sélecteurs html5 api, en particulier querySelectorAll().

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

La fonction querySelectorAll() renvoie un tableau d'éléments dom correspondant à un identifiant spécifique. Une fois que vous avez affecté le tableau renvoyé à un var, vous pouvez le passer comme argument à jquery remove().

5
chad eubanks

Comme déjà dit, seul un élément peut avoir un ID spécifique. Utilisez plutôt des classes. Voici la version sans jQuery pour supprimer les nœuds:

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

getElementsByTagNameest la méthode la plus compatible avec tous les navigateurs qui peut être utilisée ici. getElementsByClassName serait beaucoup mieux, mais n'est pas pris en charge par Internet Explorer <= IE 8.

Démo de travail

0
Felix Kling