Bu yazımızda jQuery remove() metodunun ne işe yaradığını ve nasıl kullanabileceğimizi öğreneceğiz.
remove() metodu ile seçtiğimiz bir Html etiketini içeriği ile birlikte silebiliriz. Yani hem içerisindeki tüm Html öğeleri silinir hem de seçmiş olduğumuz Html etiketinin kendisi silinir.
remove() metoduna parametre vererek de silme işlemlerini gerçekleştirebiliyoruz.
Şöyle bir uygulama yapalım:
⇒ id’si box olan bir div etiketi oluşturalım ve içerisine 3 tane p etiketi yazalım.
⇒ 3 tane p etiketi daha oluşturup birinin classına red, birinin yellow, birinin de green verelim.
⇒ 3 adet buton oluşturalım.
⇒ remove() butonuna tıklandığında div ile birlikte içerisindeki 3 p etiketini de birlikte silelim.
⇒ remove(“.red”) butonuna tıklandığında sadece arkaplan rengi kırmızı olan p etiketini silelim.
⇒ remove(“.yellow,.green”) butonuna tıklandığında ise arkaplan rengi sarı ve yeşil olan p etiketlerini silelim.
Html Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<button id="btn1">remove()</button> <button id="btn2">remove(".red")</button> <button id="btn3">remove(".yellow,.green")</button> <div id="box"> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> </div> <p class="red">Lorem ipsum dolor sit amet.</p> <p class="yellow">Lorem ipsum dolor sit amet.</p> <p class="green">Lorem ipsum dolor sit amet.</p> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<style> button { width: 200px; 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; padding: 10px; } .red{ background-color: red; } .yellow{ background-color:yellow; } .green{ background-color:green; } </style> |
jQuery Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#btn1").click(function() { $("#box").remove(); }); $("#btn2").click(function() { $("p").remove(".red"); }); $("#btn3").click(function() { $("p").remove(".yellow,.green"); }); }); </script> |
Butonlara tıklayarak sonuçlarını gözlemlerseniz daha anlaşılır olacaktır.
Umarım “jQuery remove() Metodu ve Kullanımı” 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 addClass(), removeClass(), toggleClass() Metodları ve Kullanımları
Yeni bir yazımda görüşmek üzere.
 Metodu ve Kullanımı){kind=link}