2016-04-09 14 views
2

次のようにユーザーが特定の行が削除されますする必要があること、ゴミ箱ボタンをクリックするたびに、私はjQueryを使用してテーブルの行を削除するには?

<table class="table table-striped table-bordered"> 
    <tr><th>First Name</th><th>Last Name</th><th>Age</th><th>Delete</th></tr> 
    <tr><td>Mickey</td><td>Mouse</td><td>5</td><td><button type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-trash"></span></button></td> 
    <tr><td>Tom</td><td>Cat</td><td>6</td><td><button type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-trash"></span></button></td> 
    <tr><td>Pooh</td><td>Bear</td><td>4</td><td><button type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-trash"></span></button></td> 
    <tr><td>Donaled</td><td>Duck</td><td>7</td><td><button type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-trash"></span></button></td> 
    <tr><td>Jerry</td><td>Mouse</td><td>8</td><td><button type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-trash"></span></button></td> 
</table 

、ブートストラップのテーブルを持っています。どのようにjQueryを使ってそれを達成できますか?事前にhttp://jsbin.com/gabodamace/edit?html,output

おかげ -

は、ここで私はこれまで持っているものへのリンクです!

答えて

3
$('table').on('click','.delete',function(){ 
    $(this).parents('tr').remove(); 
}); 

をを追加します。クラスdeleteを追加すると、他のハンドラでもbtnクラスを使用するのに役立ちます。 .remove()関数は、そのセレクタのhtml全体を削除します。

参照jsFiddle:https://jsfiddle.net/jagrati16/o7bu09jr/1/

3

以下のように実行します。

$('.btn-default').click(function(){ 
    $(this).parents('tr').remove(); 
}) 

てみてくださいデモ:あなたのコードで JsFiddle

関連する問題