javascript - Javascriptはhtmlテーブルの行を削除します

Question

HTMLテーブルを動的に作成すると、各行のセルの1つに、押されたときにその行を削除するボタンが格納されます。押された削除ボタンから削除するテーブル行を知るための私のオプションは何ですか？

ボタンが入っている行をどうにかして取得できますか？たぶん、クリックの中で、イベントの「this」プロパティを使用してボタンを取得し、それがどのセルにあるか、そしてそこからそのセルがどの行にあるかを調べることができますか？でも、どうやってやるのかわからない。

score 1 · Accepted Answer

ネイティブJSで実行できますが、ここにjQueryソリューションがあります。イベントが確実に保持されるように、必ずclone（true）してください。

<tr><td>hello</td><td><span class="deleteMe">Delete</td></tr>

$(".deleteMe").click(function(){$(this).parent().parent().remove();});

score 1 · Accepted Answer

これをボタンのonclickハンドラーに入れます。

this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);

score 1 · Accepted Answer

jQueryを使用している場合、これはこれを実現する方法のサンプルコードになります。

$('#my_table_id').on('click', 'button', function() {
    $(this).closest('tr').remove();
});

これがお役に立てば幸いです。

3 に答える 3