14

更新 1:

削除されている要素内にあるボタンと関係があるのではないかと思っているので、削除も行うボタンを削除することになりますか? それは問題ではないかもしれません。私は考えていることを入力していました。

私はちょうど試しました：

$( "input.btnX" ).click(function(event) {
    alert("test");
});

アラートが表示されません...テーブルと一緒にボタンが動的に生成されるため、使用する必要がありますliveか、それとも今ですか。on

元の質問:

私はテーブルを持っています（動的に生成されるので、次のような tbody にいくつの tr があるかわかりません：

<table>
    <tbody>
        <tr>
            <td>col1</td>
            <td>col2</td>
            <td><input type="button" class="btnX" name="x" value="x" /></td>
        </tr>
        <tr>
            <td>col1</td>
            <td>col2</td>
            <td><input type="button" class="btnX" name="x" value="x" /></td>
        </tr>
    </tbody>
</table>

x ボタンがクリックされた場合、親 tr を削除するにはどうすればよいですか? したがって、この例では、下の x をクリックすると、下の tr が削除されます。

私はこれを試しました：

$( "input.btnX" ).click(function(event) {
    $(this).parent('tr').remove();
});

しかし、何も起こりません。

4

8 に答える 8

36

使うだけ

    $( "input.btnX" ).click(function(event) {
    $(this).parent().parent().remove();
});

または

  $( "input.btnX" ).click(function(event) {
        $(this).closest("tr").remove();
    });

あなたがしているのは、trである親に行き、次にtrを探しているからです

ここで例を参照してくださいhttp://jsfiddle.net/gYDUF/

テーブルが JavaScript によってレンダリングされている場合は、クリックを変更する必要がある場合もあります

$("input.btnX" ).live(click, function(){

     $(this).closest("tr").remove();
});
于 2012-08-01T09:22:11.487 に答える
4 
$( "input.btnX" ).on("click", function(event) {
    $(this).closest('tr').remove();
});

これは仕事をするはずであり、非推奨の「.live（）」を回避します（すでに述べたように）。

このjsfiddleも参照してください

于 2012-08-01T10:13:15.180 に答える
4

jQuery.live()メソッドは非推奨になりました。委任されたイベント ハンドラーは.delegate()(古いバージョンの場合) または を使用する必要があります.on()。

.on()委任されたイベントを使用するための構文は次のとおりです。

$(document).on('click','input.btnX', function() {
    $(this).closest('tr').remove();
});

documentここでは、ハンドラーがバインドされた時点で存在する静的な親要素 (将来のボタンの) に置き換えることもできることに注意してください。

于 2012-08-01T10:40:27.933 に答える
4

これを試して：

$( "input.btnX" ).click(function(event) {
    $(this).closest('tr').remove();
});

tr は入力要素の直接の親ではないためです。

編集:テーブルが動的に構築されている場合は、使用してみてください

$( "input.btnX" ).live("click", function(event) {
    $(this).closest('tr').remove();
});
于 2012-08-01T09:22:16.750 に答える
3

それが良いかどうかはわかりませんが、私は使用しparents()ます...

$('input.btnX').click(function() {
    $(this).parents('tr').remove();
});
于 2012-08-01T09:25:07.160 に答える
2

id は一意である必要があるため、id="btnX"まずを に変更します。class="btnX"

次に、これを行うことができます：

$( "input.btnX" ).live(function(event) {
    $(this).closest('tr').remove();
});
于 2012-08-01T09:23:47.280 に答える
0 
$("input.btnX").live("click", function(event) {
    $(this).closest('tr').remove();
});​

これで問題が解決します。この jsFiddleが機能していることを示しています。

これは、動的テーブルで動作することを示す更新です

于 2012-08-01T09:56:00.643 に答える