jQuery Veri Silme

Elementleri ve içerikleri silmek için jQuery'de iki ana yöntem vardır.

Bunlar;
- remove() belirtilen element ve içindekileri siler.
- empty() sadece belirtilmiş elementin içindekileri siler.

jQuery remove() Yöntemi

remove() yöntemi ile belirtilmiş bir html parçasının tamamı, bu html parçası da dahil olmak üzere siler.

JAVASCRIPT Kodu

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#ana1").remove();
  });
});
</script>
<span id="ana1">[BAŞLIK]</span><br>
<button id="btn1">Sil Bunu</button><br/><br/>

[BAŞLIK]

Yukarıdaki örneğe bakarsanız btn1 etiketli butona tıklandığında ana etiketine sahip başlık içeriğinin html elementiyle birlikte kaldırıldığını göreceksiniz.

jQuery empty() Yöntemi

Belirlediğimiz elementin silinmesini istemiyorsak içini boşaltabiliriz. Bunun için empty() fonksiyonunu kullanırız.

JAVASCRIPT Kodu

<script>
$(document).ready(function(){
  $("#btn2").click(function(){
    $("#ana2").empty();
  });
});
</script>
<div style="border: 1px #000000 solid;" id="ana2">[BAŞLIK]</div><br>
<button id="btn2">Sil Bunu</button><br/><br/>

[BAŞLIK]

Bu örnekte de yukarıdakine benzer şekilde element içindeki her şey silinir. Ancak içindeki nesnelerin silinmesini istediğimiz element durur. Örnekte 1 piksellik kenarlık yaptık, butona bastıktan sonra dahi bu kenarlığın durduğunu göreceksiniz.

Sadece Belirli Elementleri Silmek

jQuery'de remove() fonksiyonunu kullanarak bir html elementinden istediklerimizi silmesini sağlayabiliriz.

Örneğin birkaç paragraf bulunan bir içerikten sadece class="" tagı sil olanları silmek istesek:

JAVASCRIPT Kodu

<script>
$(document).ready(function(){
  $("#btn3").click(function(){
    $("p").remove(".sil");
  });
});
</script>
<div style="border: 1px #000000 solid;" id="ana3">
   <p class="sil">1. paragraf</p>
   <p class="silme">2. paragraf</p>
</div><br>
<button id="btn3">Sil Bunu</button><br/><br/>

1. paragraf

2. paragraf

Butona bastığınızda sadece 1. paragrafın silindiğini görebilirsiniz.

jQuery Nedir?

jQuery Efektleri

jQuery HTML

jQuery Nesneler

jQuery AJAX

Facebook Sayfamız

Programlama Türkiye