<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
</head><body>

<style>
.alert {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

<script>
  let div = document.createElement('div');
  let div1 = document.createElement('div');
  let div2 = document.createElement('div');
  let div3 = document.createElement('div');
  
  div.className = "alert alert-success";
  div1.className = "alert alert-success";
  div2.className = "alert alert-success";
  div3.className = "alert alert-success";
  
  div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
  div1.innerHTML = "<strong>Hi there!1</strong> You've read an important message.";
  div2.innerHTML = "<strong>Hi there!2</strong> You've read an important message.";
  div3.innerHTML = "<strong>Hi there!3</strong> You've read an important message.";
  
  document.body.append(div);
  document.body.append(div1);
  document.body.append(div2);
  document.body.append(div3);
  
  let divs = document.getElementsByTagName('div');
  for(let x of divs){
    x.remove();  
  }
  
</script>

</body>
</html>

J'apprends récemment le JS, voici un problème que j'ai rencontré. Je pense que tous les «div» seront supprimés, mais div1 et div3 sont toujours là .... Je ne sais pas pourquoi, aidez-moi Et expliquez aussi pourquoi cela se produit? Merci d'avance.

1
Oreodad 11 avril 2018 à 17:07

3 réponses

Meilleure réponse

Je crois que getElementsByTagName ne renvoie pas un tableau mais un HTML en direct collection.
La collection elle-même est mutée par la méthode remove(), ce qui provoque un comportement inattendu.

La solution: vous devez le convertir en tableau avant de boucler

let div = document.createElement('div');
let div1 = document.createElement('div');
let div2 = document.createElement('div');
let div3 = document.createElement('div');

div.className = "alert alert-success";
div1.className = "alert alert-success";
div2.className = "alert alert-success";
div3.className = "alert alert-success";

div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
div1.innerHTML = "<strong>Hi there!1</strong> You've read an important message.";
div2.innerHTML = "<strong>Hi there!2</strong> You've read an important message.";
div3.innerHTML = "<strong>Hi there!3</strong> You've read an important message.";

document.body.append(div);
document.body.append(div1);
document.body.append(div2);
document.body.append(div3);

var divs = document.getElementsByTagName('div');
for(let x of Array.from(divs)) {
  console.log(x.innerHTML);
  x.remove();
}
.alert {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
3
MaxZoom 11 avril 2018 à 14:41

Vous devez parcourir le tableau de tous les divs que vous avez obtenus par nom de balise en utilisant la longueur de la variable de tableau divs que vous avez créée.

 let div = document.createElement('div');
  let div1 = document.createElement('div');
  let div2 = document.createElement('div');
  let div3 = document.createElement('div');
  
  div.className = "alert alert-success";
  div1.className = "alert alert-success";
  div2.className = "alert alert-success";
  div3.className = "alert alert-success";
  
  div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
  div1.innerHTML = "<strong>Hi there!1</strong> You've read an important message.";
  div2.innerHTML = "<strong>Hi there!2</strong> You've read an important message.";
  div3.innerHTML = "<strong>Hi there!3</strong> You've read an important message.";
  
  document.body.append(div);
  document.body.append(div1);
  document.body.append(div2);
  document.body.append(div3);
  
  let divs = document.getElementsByTagName('div'), x;
  for (x = divs.length - 1; x >= 0; x--) {
    divs[x].parentNode.removeChild(divs[x]);
}
.alert {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
</head><body>
</body>
</html>
1
Scath 11 avril 2018 à 14:13

document.getElementsByTagName renvoie NodeList, pas un tableau. NodeList peut être un objet itérable, mais ce n'est pas obligatoire. Pour itérer en utilisant la construction for ... of, il est plus sûr de convertir NodeList en tableau en utilisant:

  • Array.from
  • opérateur de propagation: for (let x of [...divs]) { ... }
 let div = document.createElement('div');
  let div1 = document.createElement('div');
  let div2 = document.createElement('div');
  let div3 = document.createElement('div');
  
  div.className = "alert alert-success";
  div1.className = "alert alert-success";
  div2.className = "alert alert-success";
  div3.className = "alert alert-success";
  
  div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
  div1.innerHTML = "<strong>Hi there!1</strong> You've read an important message.";
  div2.innerHTML = "<strong>Hi there!2</strong> You've read an important message.";
  div3.innerHTML = "<strong>Hi there!3</strong> You've read an important message.";
  
  document.body.append(div);
  document.body.append(div1);
  document.body.append(div2);
  document.body.append(div3);
  
  let divs = document.getElementsByTagName('div');
  for(let x of [...divs]){
    console.log(x.innerHTML);
    x.remove();  
  }
  
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>

<style>
.alert {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

</body>
</html>
0
Andrzej Smyk 11 avril 2018 à 14:24