JQuery ile tablodan satır silmek

JQuery ile html tablodan satır silmenin en basit metodu:

Aşağıdaki gibi bir tablonuz olduğunu varsayalım.

Ad	Soyad
Recep	Güzel
Ali	Veli

Tabloyu cshtml üzerinde yaratırken Modelden gelen bir listeyi kullanalım:

<table id="MusteriListe" border="1">
    <thead>
        <tr>
            <th>
                Ad
            </th>
            <th>
                SoyAd
            </th>
           
            <th>
            </th>
        </tr>
    </thead>
    <tbody>
            <tr>
                <td>
                    @item.Ad
                </td>
                <td>
                    @item.Soyad
                </td>
                <td>
                    <img id="imgDelete" alt="Remove" src="/Content/images/remove.png" onclick="deleteRecord(this);" />
                </td>
            </tr>
        
    </tbody>
</table>

imajımızın onClick eventine deleteRecord(this) diyerek deleteRecord fonksiyonuna img nesnesini gönderiyoruz.

deleteRecord Fonksiyonunu da aşağıdaki gibi yaratıyoruz:

function deleteRecord(x) 
{
   $(x).parent().parent().remove();   
  //delete nesnesinin(<img>) parenti TD, onun da parent i TR dir. soldaki kod ilgili satırı(TR) siler.
}

ve satırımızı başarıyla silmiş bulunuyoruz 🙂

Categories: Uncategorized