Jauno elementu pašdzēšana JavaScript

Iepriekšējā nodarbībā mēs ar jums iemācījāmies padarīt tā, lai elementi dzēstu paši sevi, uz tiem noklikšķinot.

Tagad pieņemsim, ka vecākā elementā sākotnēji nav elementu:

html<div id="parent"></div>

Izveidosim cilpā 9 jaunus rindkopas elementus, un vienlaikus panāksim, lai jebkurš rindkopas elements tiktu izdzēsts, uz tā noklikšķinot:

javascriptlet parent = document.querySelector('#parent');

for (let i = 1; i <= 9; i++) {
  let p = document.createElement('p');
  p.textContent = i;
  
  p.addEventListener('click', function() {
    this.remove();
  });
  
  parent.appendChild(p);
}

Задание 1

Dots šāds kods:

html<ul id="parent">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

<input type="submit" id="button">

Iestatiet tā, lai, noklikšķinot uz pogas, sarakstam tiktu pievienots jauns elements. Iestatiet tā, lai jebkurš li elements tiktu izdzēsts, uz tā noklikšķinot. Runājām gan par tiem li elementiem, kas jau atrodas sarakstā, gan par jaunajiem, kas izveidoti pēc pogas nospiešanas.