JavaScript ile Html DOM üzerindeki bir veya daha fazla öğeyi Html belgesinden kaldırabiliriz. Bunun için remove() metodunu kullanıyoruz.
remove() metodunun kullanımını bir örnek üzerinde inceleyelim.
Aşağıdaki şekilde Html kodlarımız olsun.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div> <h3>Menü</h3> <ul id="menu"> <li>Anasayfa</li> <li id="about">Hakkımda</li> <li>İletişim</li> </ul> <div> <button id="btn">Remove</button> </div> </div> |
Şimdi butona tıklandığında Html sayfasındaki ul etiketini içerisindekiler ile birlikte sayfadan kaldıralım.
JavaScript Kodları
|
1 2 3 4 5 6 7 8 9 10 |
<script> let menu = document.getElementById("menu"); let btn = document.getElementById("btn"); btn.addEventListener("click", function () { menu.remove(); }); </script> |
Şimdi de örneğimizi uygulamalı olarak görelim.
Gördüğünüz gibi butona tıkladığımız anda ul etiketi Html sayfasından içerisindekiler ile birlikte kaldırılıyor.
Eğer ul etiketi yerine içerisindeki li etiketlerinden birini kaldırmak isteseydik sadece ilgili öğeyi seçmemiz yeterli olacaktı. Örneğin içerisinde “Hakkımda” yazısı bulunan li etiketini kaldıralım.
Bunun için şu JavaScript kodlarını yazmamız yeterli.
|
1 2 3 4 5 6 7 8 9 10 |
<script> let about = document.getElementById("about"); let btn = document.getElementById("btn"); btn.addEventListener("click", function () { about.remove(); }); </script> |
Örneğimizi uygulamalı olarak görelim.
⇒ JavaScript remove() metodunun tarayıcı desteği aşağıdaki gibidir.
- Chrome – 23
- Internet Explorer / Edge – 12
- Firefox – 23
- Safari – 7
- Opera – 15
Html öğelerine erişim metodları hakkında detaylı bilgi için şu yazılarımı okuyabilirsiniz.
JavaScript Html DOM Erişim Yöntemleri – 1
JavaScript Html DOM Erişim Yöntemleri – 2
Umarım “JavaScript Html DOM remove() Kullanımı” başlıklı yazım sizin için faydalı olmuştur.
Yeni bir yazımda görüşmek üzere.
 Kullanımı){kind=link}