0

だから私はテーブルを持っていて、ボタンが送信されるたびに4列のテーブルに行を追加し、各行に削除ボタンを配置します. 私の目的は行全体を削除できるようにすることですが、それを押すとボタンだけが削除されます。行全体を削除するにはどうすればよいですか?

$(this).parent().remove()

私はこれを試しましたが、うまくいきません.tdはtr内に直接あるので、trにアクセスして削除する必要がありますが、行はまだ存在します.

4

3 に答える 3

4

tr直接の親ではなく、最も近い要素を選択したい。あなたのイベントバインディングを見なければ、それ$(this)はボタンであり、それ$(this).parent()は<td>. 代わりに、次のことを試してください。

$(this).closest('tr').remove();

または、の特定の階層を保証できる場合はtr>td>button、次を使用できます。

$(this).parent().parent().remove();

後者の形式は HTML の構造と密接に結びついているため、使用しないことを強くお勧めします。HTML が次のように始まる場合:

<tr>
    <td>
        <button>Example</button>
    </td>
</tr>

その後、次のように変更されます。

<tr>
    <td>
        <div class="wrapper">
            <button>Example</button>
        </div>
    </td>
</tr>

usingclosest('tr')は引き続き機能しますが、 usingparent().parent()は壊れます。

イベントが発生しないという二次的な問題に関連しています。$('.foo button').click(removeRow);(要素に.foo一致する場所) でイベントをバインドしている場合table、イベントは新しく作成された要素には適用されませんbutton。代わりに、次のイベント委任形式を使用する必要がありますon(または単にdelegate古いバージョンの jQuery を使用している場合)。

$('.foo').on('click', 'button', removeRow);

これにより、要素にイベント バインディングが保存されtable、コールバックが呼び出されると、指定されたイベントをトリガーした要素が 2 番目の引数 (この場合は'button')で指定されたセレクターと一致するかどうかが確認されます。指定されたハンドラー (この場合removeRowは ) で、一致した要素をコンテキストとして使用します (ハンドラー内では、this引き続きbutton要素を指します)。

于 2013-02-03T05:55:12.260 に答える
1 
  $(this).closest('tr').remove();
于 2013-02-03T05:54:54.250 に答える
0

あなたのコードは次のようになっていると思います：

<table>
    <tr>
        <td>Column</td>
        <td><button></button></td>
    </tr>
</table>

つまり、あなた$(this).parent()は<td>ではなく<tr>です。別のものが必要ですparent()：

$(this).parent().parent().remove();
于 2013-02-03T05:55:58.580 に答える