Samousuwanie nowych elementów w JavaScript
W poprzedniej lekcji nauczyliśmy się robić tak, aby elementy usuwały się same po kliknięciu.
Załóżmy, że teraz w elemencie nadrzędnym początkowo nie ma elementów:
<div id="parent"></div>
Stwórzmy w pętli 9 nowych akapitów,
przy czym zróbmy tak, aby każdy akapit był usuwany
po kliknięciu na nim:
let 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);
}
Dany jest następujący kod:
<ul id="parent">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<input type="submit" id="button">
Spraw, aby po kliknięciu przycisku do
listy był dodawany nowy element. Spraw,
aby dowolny li był usuwany po kliknięciu na
nią. Mowa zarówno o tych li, które już
są na liście, jak i o nowych, utworzonych po
naciśnięciu przycisku.