jQuery 03 – remove()

remove() jQuery’de selector ile belirlenen DOM element setlerini silmek için kullanılıyor. Yani aslında bizim html tasarımımızın içerisindeki elementler remove() kullanıldığında hiç olmamış gibi çalıştırılıyor. Temel olarak 2 farklı biçimde kullanabiliriz bu methodu.Bunlar;

  1. Selector ile belirlenen elementler seçildikten sonra (class ya da id farketmiyor) .remove() çağırılır.

<html>
 <head>
 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
 <script>/*
 $(document).ready(function(){
 $("button").click(function(){
 $('table tr').find('td:eq(1),th:eq(1)').remove();
 });
 }); */

 function deleteFirstColumn(){
 //$('table tr').find('td:eq(1),th:eq(1)').remove();

//remove the 1st column
 $('table tr').find('td:eq(0),th:eq(0)').remove();

//remove the 2nd column
 //$('table tr').find('td:eq(1),th:eq(1)').remove();
 }
 </script>

</head>

 <body>

 <button type="button" onclick="deleteFirstColumn()"> delete first column</button>

 <table border="1">
 <tr>
 <td>column 1</td>
 <td>column 2</td>
 <td>column 3</td>
 <td>column 4</td>
 <td>column 5</td>
 <td>column 6</td>
 <td>column 7</td>
 <td>column 8</td>
 </tr>

 <tr>
 <td>c 1</td>
 <td>c 2</td>
 <td>c 3</td>
 <td>c 4</td>
 <td>c 5</td>
 <td>c 6</td>
 <td>c 7</td>
 <td>c 8</td>
 </tr>

 <tr>
 <td>c 1</td>
 <td>c 2</td>
 <td>c 3</td>
 <td>c 4</td>
 <td>c 5</td>
 <td>c 6</td>
 <td>c 7</td>
 <td>c 8</td>
 </tr>
 </table>
 </body>
</html>

2. Selector ile element türü belirlendikten sonra .remove methodu herhangibir class veya :contains() gibi bir selector’u parametre olarak kullanır.

</pre>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>remove demo</title>
 <style>
 p {
 background: yellow;
 margin: 6px 0;
 }
 </style>
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p class="hello">Hello</p>
how are
<p>you?</p>
<button>Call remove( ":contains('Hello')" ) on paragraphs</button>

<script>
$( "button" ).click(function() {
 $( "p" ).remove( ":contains('Hello')" );
});
</script>

</body>
</html>
<pre>

Yorum bırakın

Filed under jQuery

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s