jQuery Silme Metotları
jQuery Silme Metotları
jQuery metotları ile HTML elemanlarını silmek de mümkündür. Eleman ve içerikleri silmek için esasen iki farklı jQuery metodu mevcuttur:
- remove() – seçilen elemanı ve varsa çocuk elemanları siler.
- empty() – seçilen elemanın çocuklarını siler.
jQuery remove() Metodu
jQuery remove() metodu seçilen HTML elemanı ve çocuklarını siler.
$("#div1").remove();
Örnek HTML kodunu beraber inceleyelim:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#pat").remove();
});
});
</script>
</head>
<body>
<div id="pat" style="height:140px;width:350px;border:2px solid black;background-color:pink;">
<p>Geleceği Yazanlar</p>
<p>Buraya kadar jQuery ile ilgili birçok şey öğrendik.</p>
</div>
<br>
<button>ELEMANI SIL</button>
</body>
</html>
ELEMANI SIL düğmesine tıkladığınızda iki paragraf da (<p> elemanları) silinecektir.
jQuery empty() Metodu
jQuery empty() seçilen elemanın çocuklarını siler.
Örnek HTML kodunu dikkatle inceleyelim:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").empty();
});
});
</script>
</head>
<body>
<div id="div1" style="height:150px;width:350px;border:3px solid black;background-color:pink;">
<p>I.Steve Jobs</p>
<p>II:Tim Cook</p>
</div>
<br>
<button>SIL</button>
</body>
</html>
Burada SIL düğmesini tıkladığınızda her iki paragraf da silinecektir.
Silinecek Elemanları Seçme
jQuery'nin remove() metodu aynı zamanda bir parametre alabilir; bu sayede silinecek elemanları seçmek ya da filtrelemek mümkün olur. Parametre, jQuery'nin seçici ifadelerinden herhangi birine göre yazılabilir. Aşağıdaki örnek class="italic" olan tüm <p> elemanlarını silmektedir:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".italic");
});
});
</script>
</head>
<body>
<p>Geleceği Yazanlar</p>
<p class="italic"><i>İtalik yazılar<br> bir bakarsın silinirler</i></p>
<button>ITALIKLER SILINECEK</button>
</body>
</html>
ITALIKLER SILINECEK düğmesini tıkladığınızda eğik yazı stiline sahip satırlar silinecektir.
Yorumlar
Yorum Gönder