jQuery data(), removeData() Metodları ve Kullanımları

Bu yazımızda jQuery data() ve removeData() metodlarının ne işe yaradığını ve nasıl kullanabileceğimizi öğreneceğiz.

data() metodu ile seçmiş olduğumuz bir Html etiketinin istediğimiz data niteliğinin değerini alabilir veya data niteliğine bir değer verebiliriz.

removeData() metodu ile seçmiş olduğumuz bir Html etiketinin istediğimiz data niteliğinin değerini silebiliriz.

İlk olarak data() metodunun kullanımına bakalım. Html etiketlerinde data niteliğini şu şekilde kullanıyoruz:

 ⇒  data-  yazdıktan sonra istediğimiz ismi verebiliyoruz. Burada id ismini verdim. Siz isterseniz ahmet, mehmet gibi isimler bile verebilirsiniz.

 ⇒  Sonrasında a etiketinin id isimli data niteliğine 5 değerini verdim. Artık istediğimiz zaman bu değeri kullanabiliriz.

Genelde data() metodunu Ajax ile silme işlemlerini gerçekleştirirken kullanıyorum. Örneğin bir ürün silmek istiyorsam data niteliğine ürünün id’sini verip silme metodunun içerisinde jQuery kodlarıyla id’yi tekrar alıp silme işlemini gerçekleştirebiliyorum.

Şimdi bir örnek üzerinde konuyu daha iyi anlamaya çalışalım.

 ⇒  1 tane Delete butonu yazalım.

 ⇒  5 tane daha buton oluşturup her bir buton ile Delete butonu üzerinde data(), removeData() metodlarını uygulayalım.

 ⇒  “Data” butonuna tıklandığında Delete butonunun data-product niteliğindeki değeri alert ile gösterelim.

 ⇒  “Data Set” butonuna tıklandığında Delete butonunun data-product niteliğine Computer değerini verelim.

 ⇒  “Data Remove” butonuna tıklandığında Delete butonunun data-product niteliğini silelim.

 ⇒  “Data Object Set” butonuna tıklandığında Delete butonunun data niteliğine bir nesne atayalım.

 ⇒  “Data Object” butonuna tıklandığında Delete butonunun data niteliğine atamış olduğumuz nesneyi alert mesajı ile gösterelim.

Css Kodları

jQuery Kodları

Butonlara tıklarken tarayıcınızda sağ tıklayıp incele derseniz Delete butonu üzerindeki değişiklikleri inceleyerek daha iyi anlayabilirsiniz.

Umarım “jQuery data(), removeData() Metodları ve Kullanımları” başlıklı yazım sizin için faydalı olmuştur.

Şu yazılar da ilginizi çekebilir.

jQuery animate(), stop() Metodları ve Kullanımları

jQuery delay() Metodu ve Kullanımı

Yeni bir yazımda görüşmek üzere.

Yorum Yazın

650+ ABONE ARASINA KATIL

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Bilgisayar, Telefon, Android, Veri Güvenliği ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.

Abone olduğunuz için teşekkürler.

Birşeyler yanlış gitti.