JavaScript DOM: removeChild() ve remove() Metotları

Önceki makalede element oluşturmayı ve eklemeyi öğrendik. Şimdi sıra silme işleminde!

DOM'dan element kaldırmak için iki yöntem var:

removeChild() - Eski yöntem (parent üzerinden)
remove() - Modern yöntem (direkt silme)

Bu makalede her iki yöntemi de öğreneceğiz.

removeChild() - Eski Yöntem

removeChild() metodu, bir elementi parent'ı üzerinden siler. Yani silmek istediğiniz elementin önce parent'ını bulmanız gerekir.

Sözdizimi

javascript

parentElement.removeChild(silinecekElement)

Örnek

html

<ul id="liste">
    <li>Öğe 1</li>
    <li>Öğe 2</li>
    <li>Öğe 3</li>
</ul>

javascript

// Silinecek elementi seç
const ilkLi = document.querySelector("#liste li");

// Parent'ı bul
const liste = document.querySelector("#liste");
// veya
const parent = ilkLi.parentElement;

// Parent üzerinden sil
liste.removeChild(ilkLi);

Sonuç:

html

<ul id="liste">
    <li>Öğe 2</li>
    <li>Öğe 3</li>
</ul>

Kısa Yol (parentElement ile)

Parent'ı ayrı bir değişkene atamadan tek satırda yapabilirsiniz:

javascript

const silinecek = document.querySelector(".silinecek");
silinecek.parentElement.removeChild(silinecek);

removeChild'ın Dezavantajı

javascript

// ❌ Bu çalışmaz!
const element = document.querySelector("#element");
element.removeChild();  // Hata! Neyi sileceğini bilmiyor

// ❌ Bu da çalışmaz!
element.removeChild(element);  // Kendisi kendi çocuğu değil!

// ✅ Parent üzerinden çağırmalısınız
element.parentElement.removeChild(element);

Gördüğünüz gibi biraz karmaşık ve uzun. İşte bu yüzden modern remove() metodu geldi!

remove() - Modern Yöntem

remove() metodu, elementi doğrudan siler. Parent'a ihtiyaç yok!

Sözdizimi

javascript

element.remove()

Örnek

html

<ul id="liste">
    <li>Öğe 1</li>
    <li>Öğe 2</li>
    <li>Öğe 3</li>
</ul>

javascript

const ilkLi = document.querySelector("#liste li");
ilkLi.remove();  // Bu kadar basit!

Sonuç:

html

<ul id="liste">
    <li>Öğe 2</li>
    <li>Öğe 3</li>
</ul>

Çok Daha Temiz!

javascript

// removeChild ile (eski)
element.parentElement.removeChild(element);

// remove ile (modern)
element.remove();

removeChild vs remove Karşılaştırma

Özellik	removeChild()	remove()
Sözdizimi	`parent.removeChild(child)`	`element.remove()`
Parent gerekli mi?	✅ Evet	❌ Hayır
IE desteği	✅ Var	❌ Yok
Kullanım kolaylığı	Karmaşık	Basit
Dönüş değeri	Silinen element	undefined

Hangisini Kullanmalı?

Modern projeler: remove() kullanın (daha temiz, daha kolay)
IE desteği gerekiyorsa: removeChild() kullanın

Pratik Örnekler

Örnek 1: Sil Butonu ile Liste Öğesi Silme

html

<ul id="gorevler">
    <li>Görev 1 <button class="sil-btn">×</button></li>
    <li>Görev 2 <button class="sil-btn">×</button></li>
    <li>Görev 3 <button class="sil-btn">×</button></li>
</ul>

css

.sil-btn {
    background: #dc3545;
    color: white;
    border: none;
    padding: 2px 8px;
    cursor: pointer;
    margin-left: 10px;
}

javascript

const silButonlari = document.querySelectorAll(".sil-btn");

silButonlari.forEach(btn => {
    btn.addEventListener("click", function() {
        // Butonun parent'ı olan li'yi sil
        const li = this.parentElement;
        li.remove();
    });
});

Örnek 2: Onay ile Silme

html

<div class="urun-kart" data-id="1">
    <h3>Ürün 1</h3>
    <button class="kaldir-btn">Kaldır</button>
</div>
<div class="urun-kart" data-id="2">
    <h3>Ürün 2</h3>
    <button class="kaldir-btn">Kaldır</button>
</div>

javascript

const kaldirButonlari = document.querySelectorAll(".kaldir-btn");

kaldirButonlari.forEach(btn => {
    btn.addEventListener("click", function() {
        const kart = this.parentElement;
        const urunAdi = kart.querySelector("h3").innerText;

        // Onay iste
        const onay = confirm(`"${urunAdi}" silinecek. Emin misiniz?`);

        if (onay) {
            kart.remove();
        }
    });
});

Örnek 3: Bildirim Kapatma

html

<div class="bildirim basari">
    İşlem başarılı!
    <button class="kapat">×</button>
</div>
<div class="bildirim uyari">
    Dikkat edin!
    <button class="kapat">×</button>
</div>

javascript

const kapatButonlari = document.querySelectorAll(".bildirim .kapat");

kapatButonlari.forEach(btn => {
    btn.addEventListener("click", function() {
        this.parentElement.remove();
    });
});

Örnek 4: Animasyonlu Silme

html

<div class="kart" id="kart1">
    Kart İçeriği
    <button class="sil">Sil</button>
</div>

css

.kart {
    transition: opacity 0.3s, transform 0.3s;
}
.kart.silinecek {
    opacity: 0;
    transform: scale(0.8);
}

javascript

const silBtn = document.querySelector(".sil");

silBtn.addEventListener("click", function() {
    const kart = this.parentElement;

    // Önce animasyon class'ı ekle
    kart.classList.add("silinecek");

    // Animasyon bittikten sonra DOM'dan kaldır
    setTimeout(() => {
        kart.remove();
    }, 300);  // CSS transition süresi kadar bekle
});

Örnek 5: Tüm Çocukları Silme

html

<ul id="liste">
    <li>Öğe 1</li>
    <li>Öğe 2</li>
    <li>Öğe 3</li>
</ul>
<button id="temizle-btn">Listeyi Temizle</button>

javascript

const temizleBtn = document.querySelector("#temizle-btn");
const liste = document.querySelector("#liste");

temizleBtn.addEventListener("click", function() {
    // Yöntem 1: innerHTML ile (en hızlı)
    liste.innerHTML = "";

    // Yöntem 2: Her çocuğu tek tek sil
    // while (liste.firstElementChild) {
    //     liste.firstElementChild.remove();
    // }

    // Yöntem 3: replaceChildren() (modern)
    // liste.replaceChildren();
});

Örnek 6: Belirli Koşula Göre Silme

html

<ul id="urunler">
    <li data-stok="true">Ürün A - Stokta</li>
    <li data-stok="false">Ürün B - Tükendi</li>
    <li data-stok="true">Ürün C - Stokta</li>
    <li data-stok="false">Ürün D - Tükendi</li>
</ul>
<button id="tukenmis-sil">Tükenmiş Ürünleri Kaldır</button>

javascript

const silBtn = document.querySelector("#tukenmis-sil");

silBtn.addEventListener("click", function() {
    const urunler = document.querySelectorAll("#urunler li");

    urunler.forEach(urun => {
        if (urun.dataset.stok === "false") {
            urun.remove();
        }
    });
});

Örnek 7: Dinamik Liste ile Ekleme ve Silme

html

<input type="text" id="yeni-oce" placeholder="Yeni öğe...">
<button id="ekle-btn">Ekle</button>
<ul id="liste"></ul>

javascript

const input = document.querySelector("#yeni-oce");
const ekleBtn = document.querySelector("#ekle-btn");
const liste = document.querySelector("#liste");

ekleBtn.addEventListener("click", function() {
    const metin = input.value.trim();

    if (metin) {
        // Yeni li oluştur
        const li = document.createElement("li");
        li.innerText = metin;

        // Sil butonu ekle
        const silBtn = document.createElement("button");
        silBtn.innerText = "×";
        silBtn.classList.add("sil-btn");

        // Sil butonuna event ekle
        silBtn.addEventListener("click", function() {
            li.remove();
        });

        li.appendChild(silBtn);
        liste.appendChild(li);

        input.value = "";
    }
});

Örnek 8: Çoklu Seçim ve Toplu Silme

html

<div id="ogeler">
    <div class="oge"><input type="checkbox"> Öğe 1</div>
    <div class="oge"><input type="checkbox"> Öğe 2</div>
    <div class="oge"><input type="checkbox"> Öğe 3</div>
    <div class="oge"><input type="checkbox"> Öğe 4</div>
</div>
<button id="secilenleri-sil">Seçilenleri Sil</button>

javascript

const silBtn = document.querySelector("#secilenleri-sil");

silBtn.addEventListener("click", function() {
    const checkboxlar = document.querySelectorAll(".oge input[type='checkbox']");

    checkboxlar.forEach(checkbox => {
        if (checkbox.checked) {
            checkbox.parentElement.remove();
        }
    });
});

Örnek 9: Geri Alma (Undo) Özelliği

html

<ul id="liste">
    <li>Öğe 1 <button class="sil">×</button></li>
    <li>Öğe 2 <button class="sil">×</button></li>
    <li>Öğe 3 <button class="sil">×</button></li>
</ul>
<button id="geri-al" disabled>Geri Al</button>

javascript

const liste = document.querySelector("#liste");
const geriAlBtn = document.querySelector("#geri-al");
let sonSilinenler = [];

// Sil butonlarına event ekle
document.querySelectorAll(".sil").forEach(btn => {
    btn.addEventListener("click", function() {
        const li = this.parentElement;

        // Silmeden önce kaydet
        sonSilinenler.push({
            element: li,
            parent: li.parentElement,
            nextSibling: li.nextElementSibling
        });

        li.remove();
        geriAlBtn.disabled = false;
    });
});

// Geri al butonu
geriAlBtn.addEventListener("click", function() {
    if (sonSilinenler.length > 0) {
        const { element, parent, nextSibling } = sonSilinenler.pop();

        // Eski yerine ekle
        if (nextSibling) {
            parent.insertBefore(element, nextSibling);
        } else {
            parent.appendChild(element);
        }

        if (sonSilinenler.length === 0) {
            geriAlBtn.disabled = true;
        }
    }
});

Tüm Çocukları Silme Yöntemleri

Bir elementin tüm içeriğini temizlemek için birkaç yöntem:

Yöntem 1: innerHTML (En Hızlı)

javascript

element.innerHTML = "";

Yöntem 2: textContent

javascript

element.textContent = "";

Yöntem 3: while Döngüsü

javascript

while (element.firstChild) {
    element.removeChild(element.firstChild);
}

Yöntem 4: replaceChildren() (Modern)

javascript

element.replaceChildren();

Performans Karşılaştırması

Yöntem	Hız	Tavsiye
`innerHTML = ""`	En hızlı	✅ Genel kullanım
`textContent = ""`	Hızlı	✅ Sadece metin varsa
`while` döngüsü	Yavaş	⚠️ Özel durumlar
`replaceChildren()`	Hızlı	✅ Modern projeler

Özet

javascript

// MODERN YÖNTEM (Önerilen)
element.remove();

// ESKİ YÖNTEM (IE desteği için)
element.parentElement.removeChild(element);

// TÜM ÇOCUKLARI SİLME
parent.innerHTML = "";
parent.replaceChildren();

// KOŞULLU SİLME
if (element.classList.contains("silinecek")) {
    element.remove();
}

// ANİMASYONLU SİLME
element.classList.add("fade-out");
setTimeout(() => element.remove(), 300);

Metod	Kullanım	Parent Gerekli
`remove()`	`element.remove()`	❌
`removeChild()`	`parent.removeChild(child)`	✅

DOM Bölümü Tamamlandı!

Tebrikler! 🎉 DOM (Document Object Model) bölümünü tamamladınız!

Bu bölümde öğrendiklerimiz:

DOM'a Giriş - DOM nedir, nasıl çalışır
Element Seçme - getElementById, getElementsByTagName/ClassName, querySelector/querySelectorAll
İçerik Değiştirme - innerHTML, textContent, innerText
Attribute İşlemleri - getAttribute, setAttribute, data attributes
Stil Değiştirme - style property, getComputedStyle
Class Yönetimi - classList (add, remove, toggle, contains)
DOM Gezinme - parent, children, siblings
Element Oluşturma - createElement, append, prepend
Element Silme - remove, removeChild

Artık JavaScript ile web sayfalarını dinamik olarak manipüle edebilirsiniz!

Sıradaki adım: Events (Olaylar) - Kullanıcı etkileşimlerine tepki verme!

JavaScript DOM: removeChild() ve remove() Metotları

removeChild() - Eski Yöntem

Sözdizimi

Örnek

Kısa Yol (parentElement ile)

removeChild'ın Dezavantajı

remove() - Modern Yöntem

Sözdizimi

Örnek

Çok Daha Temiz!

removeChild vs remove Karşılaştırma

Hangisini Kullanmalı?

Pratik Örnekler

Örnek 1: Sil Butonu ile Liste Öğesi Silme

Örnek 2: Onay ile Silme

Örnek 3: Bildirim Kapatma

Örnek 4: Animasyonlu Silme

Örnek 5: Tüm Çocukları Silme

Örnek 6: Belirli Koşula Göre Silme

Örnek 7: Dinamik Liste ile Ekleme ve Silme

Örnek 8: Çoklu Seçim ve Toplu Silme

Örnek 9: Geri Alma (Undo) Özelliği

Tüm Çocukları Silme Yöntemleri

Yöntem 1: innerHTML (En Hızlı)

Yöntem 2: textContent

Yöntem 3: while Döngüsü

Yöntem 4: replaceChildren() (Modern)

Performans Karşılaştırması

Özet

DOM Bölümü Tamamlandı!

JavaScript Classes - Pratik Uygulamalar

JavaScript Classes

Constructor Functions ve new Keyword

removeChild() - Eski Yöntem

Sözdizimi

Örnek

Kısa Yol (parentElement ile)

removeChild'ın Dezavantajı

remove() - Modern Yöntem

Sözdizimi

Örnek

Çok Daha Temiz!

removeChild vs remove Karşılaştırma

Hangisini Kullanmalı?

Pratik Örnekler

Örnek 1: Sil Butonu ile Liste Öğesi Silme

Örnek 2: Onay ile Silme

Örnek 3: Bildirim Kapatma

Örnek 4: Animasyonlu Silme

Örnek 5: Tüm Çocukları Silme

Örnek 6: Belirli Koşula Göre Silme

Örnek 7: Dinamik Liste ile Ekleme ve Silme

Örnek 8: Çoklu Seçim ve Toplu Silme

Örnek 9: Geri Alma (Undo) Özelliği

Tüm Çocukları Silme Yöntemleri

Yöntem 1: innerHTML (En Hızlı)

Yöntem 2: textContent

Yöntem 3: while Döngüsü

Yöntem 4: replaceChildren() (Modern)

Performans Karşılaştırması

Özet

DOM Bölümü Tamamlandı!

İlgili yazılar

JavaScript Classes - Pratik Uygulamalar

JavaScript Classes

Constructor Functions ve new Keyword