Bu yazımızda jQuery empty() metodunun ne işe yaradığını ve nasıl kullanabileceğimizi öğreneceğiz.
empty() metodu ile seçtiğimiz bir Html etiketi içerisindeki tüm içeriği (içerisindeki tüm Html öğelerini) silebiliriz. Geriye sadece seçilen Html etiketi kalır.
Şöyle bir uygulama yapalım:
⇒ id’si box olan bir div etiketi oluşturalım.
⇒ Bu div’in içerisine sırasız bir liste ekleyelim.
⇒ Sonra bir buton oluşturalım ve bu butona tıklandığında div’in içerisini silelim. Yani sırasız listeyi silip kapsayıcısı olan div’i bırakacağız.
Html Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<button id="empty">Empty</button> <div id="box"> <ul> <li>JavaScript</li> <li>jQuery</li> <li>Html</li> <li>Css</li> </ul> </div> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<style> button { width: 120px; padding: 10px; margin-right: 8px; margin-bottom: 8px; background-color: tomato; color: #fff; border: none; cursor: pointer; font-size: 16px; } #box { border: 3px solid black; width: 100%; height: 115px; } </style> |
jQuery Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#empty").click(function() { $("#box").empty(); }); }); </script> |
Empty butonuna tıkladığınızda sırasız listenin silindiğini görebilirsiniz.
Umarım “jQuery empty() Metodu ve Kullanımı” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
jQuery text(), html(), val() Metodları ve Kullanımları
jQuery Document Ready Fonksiyonu Nedir? Nasıl Kullanılır?
Yeni bir yazımda görüşmek üzere.
 Metodu ve Kullanımı){kind=link}