ID Kullanarak Javascript Element Silme

Bir websayfası oluşturuduğunuzda bu sayfayı ifade ederken DOM ( Document Object Model) kullanıyoruz. Bu bir websayfasını oluşturan tüm elementleri kapsayan bir modeldir. Javascript ile DOM üzerinde birçok işlem yapabiliriz.

Bu yazımızda ID bilgisini bildiğimiz bir DOM elementinin nasıl silineceğini göreceğiz.

Remove Metodu

Javascript Element.remove metodu ile bir DOM elementini silebiliriz. BU metod geriye undefined değeri dönderir. Kullanım şekli

element.remove();

şeklindedir. Biz bu yazımızda bir DOM elemanının ID değerini kullanarak bir elementi silmeyi göreceğiz.

Bunun için izleyeceğimiz yol şu şekildedir.

• document.getElementById metodu ile silmek istediğimiz elemente ulaşıyoruz.
• Sileceğimiz elemente ulaştığımızda remove metodunu kullanarak elemanı siliyoruz.

Şimdi bir örnek yapalım.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script>
        const elementiSil = () => {
            const kutuDOM = document.getElementById("kutu");
            if( kutuDOM ) kutuDOM.remove();
        }
    </script>
  </head>
  <body>
    <div id="kutu" style="padding:15px; background-color: gray; margin:15px;">Kutu</div>

    <p style="text-align: center">
        <button onClick="javascript: elementiSil()">KUTUYU SİL</button>
    </p>
  </body>
</html>

Yukarıdaki kod ile bir websayfası oluşturarak çalıştırdığınızda, ekrana kutu şeklinde bir div ve bir adet buton çıkacaktır. Eğer butona tıklarsanız, elementiSil fonksiyonu çalışacaktır.

Bu fonksiyon ilk olarak kutuDOM adındaki bir değişkene IDsi kutu olan elementi atar. Bunun için

const kutuDOM = document.getElementById("kutu");

kodunu kullanıyoruz.

document.getElementById(elementID);

Kodu, eğer element varsa o elementi, eğer element yoksa null değerini döner. İşlemimizde bu bilgiyi kullanacağız.

DOM üzerindeki elemente ulaşarak onu kutuDOM değişkenine atadıktan sonra yaptığımız işlem ise bir denetim, bunu olmayan bir elementi silmemek için yapıyoruz, eğer element varsa,

kutuDOM.remove();

metodunu çağırarak elementi siliyoruz. Bu işlem olduğunda element sayfadan da kalmış olacaktır. ID değerini bildiğimiz tüm elementlerde bu şekilde çalışarak işlem yapabiliriz.

Sonuç

DOM üzerindeki bir elementi silmek için eğer ID değeri varsa getElementById ile elementi alıyoruz ve sonrasında element.remove() metodu ile elementi siliyoruz.

Javascript DOM işlemleri ile ilgili sorularınızı bize yorumlardan sorabilirsiniz.