Elementtien Poistaminen DOM:sta

Tässä luvussa perehdytään siihen, miten elementtejä poistetaan DOM:sta.

Elementtien poistaminen DOM:sta

Elementtejä voidaan poistaa dynaamisesti käyttämällä menetelmiä kuten removeChild() ja remove().

RemoveChild()

removeChild()-metodi poistaa määritetyn lapsisolmun vanhemmasta solmusta. Tämä edellyttää sekä vanhemman että poistettavan lapsen määrittämistä.

Remove()

remove()-metodi tarjoaa suoraviivaisemman tavan poistaa elementti suoraan ilman, että tarvitsee erikseen viitata vanemielementtiin.

Käytännön esimerkki: Dynaaminen tehtävälistan hallinta

Rakennetaan dynaaminen tehtävälista, jossa käyttäjät voivat lisätä uusia tehtäviä, lisätä tehtäviä tiettyihin kohtiin ja poistaa tehtäviä tarpeen mukaan.

Uusien tehtävien luominen ja lisääminen:

• createElement()-metodia käytetään uusien <li>- ja <button>-elementtien luomiseen dynaamisesti, kun käyttäjä syöttää uuden tehtävän;
• appendChild() lisää juuri luodun tehtävän listan loppuun, mahdollistaen tehtävien jatkuvan lisäämisen käyttäjän vuorovaikutuksen mukaan.
  

Tehtävien lisääminen tiettyihin kohtiin: "Lisää tehtävä alkuun" -painike käyttää insertBefore()-metodia lisätäkseen tehtävän listan alkuun, mikä havainnollistaa, miten elementtejä voidaan sijoittaa tarkasti vanhemman sisälle.

Poistotoiminnallisuuden lisääminen:

• addRemoveFunctionality()-funktio liittää tapahtumankuuntelijan jokaisen tehtävän poista-painikkeeseen, jolloin tehtävä voidaan poistaa painiketta napsauttamalla;
• Tätä funktiota käytetään sekä olemassa oleviin että uusiin tehtäviin, mikä varmistaa yhtenäisen toiminnan kaikille tehtäville.
  

Valmiiden elementtien käsittely: Myös olemassa oleviin tehtäviin lisätään poistotoiminnallisuus valitsemalla kaikki nykyiset poista-painikkeet ja liittämällä tarvittavat tapahtumankuuntelijat sivun latautuessa.