CODEWITHSUNDEEP
javascripthtml
user10467090
user10467090

Reputation:

for of loop and events

when i use for of and set button as first element child for div.pane
instead of closing every div it's just close the last div . 

for(pane of panes){
   pane.firstElementChild.onclick = () => pane.remove();
}

full code at codepen : https://codepen.io/Howaida/pen/JQRLME

when I use the same code but the only difference I insert button to be first child by js using insertAdjacentHtml the code works as i expect and it closes every dive when i press on the button 

for (let pane of panes) {
  pane.insertAdjacentHTML("afterbegin", '<button class="remove-button">[x]</button>');
  // button becomes the first child of pane
  pane.firstChild.onclick = () => pane.remove();
}

full code at codepen : https://codepen.io/Howaida/pen/MMjVJN

isn't supposed to give the same result , and why doesn't it work in first case?

Upvotes: 0

Views: 30

Answers (1)

Scott Marcus
Scott Marcus

Reputation: 65806

Without a let declaration for pane, the variable becomes global and you set up a closure. By the time the loop finishes, it references the last object that was iterated. Using let gives you block level scope and allows each loop iteration to hold on to its own scope.

const panes = document.querySelectorAll('.pane');
for(let pane of panes){
   pane.firstElementChild.onclick = () => pane.remove();
}
*{
  margin:0;
  Padding:0;
  box-sizing:border-box;
  border:none;
  outline:none;
}    
.pane{
  width: 400px;
  height:150;
  border-top: 2px solid #c4df9b;
  background-color: #e1ead7;
  padding: 20px;
  position: relative;
}
.pane button{
  position: absolute;
  right: 0;
  top:0;
  display: inline-block;
  padding: 10px;
  color: #8b0000;
  font-weight: bold;
  background-color: transparent;
}
<div class="pane">
        <button class='remove-button'>[x]</button>
        <h3>Horse</h3>
        <p>The horse is one of two extant subspecies of Equus ferus. It is an odd-toed ungulate mammal belonging to the taxonomic family Equidae. The horse has evolved over the past 45 to 55 million years from a small multi-toed creature, Eohippus, into thelarge, single-toed animal of today.</p>
      </div>

      <div class="pane">
        <button class='remove-button'>[x]</button>
        <h3>Donkey</h3>
        <p>The donkey or ass (Equus africanus asinus) is a domesticated member of the horse family, Equidae. The wild ancestor of the donkey is the African wild ass, E. africanus. The donkey has been used as a working animal for at least 5000 years.</p>
      </div>
      
      <div class="pane">
        <button class='remove-button'>[x]</button>
        <h3>Cat</h3>
        <p>The domestic cat (Latin: Felis catus) is a small, typically furry, carnivorous mammal. They are often called house cats when kept as indoor pets or simply cats when there is no need to distinguish them from other felids and felines. Cats are oftenvalued by humans for companionship and for their ability to hunt vermin.</p>
      </div>

Upvotes: 1

Related Questions