334

jQueryでテーブルの行を削除する最良の方法は何ですか?

4

17 に答える 17

470

あなたが正しい：

$('#myTableRow').remove();

行に次のidような がある場合、これは正常に機能します。

<tr id="myTableRow"><td>blah</td></tr>

がない場合はid、jQuery の豊富なセレクターのいずれかを使用できます。

于 2008-10-04T21:11:49.897 に答える
131 
$('#myTable tr').click(function(){
    $(this).remove();
    return false;
});

さらに良いもの

$("#MyTable").on("click", "#DeleteButton", function() {
   $(this).closest("tr").remove();
});
于 2008-10-05T01:07:26.473 に答える
63

テーブルのデータセル内にボタン/リンクがあると仮定すると、このようなものがうまくいきます...

$(".delete").live('click', function(event) {
    $(this).parent().parent().remove();
});

これにより、クリックされたボタン/リンクの親の親が削除されます。これは通常の DOM オブジェクトではなく jQuery オブジェクトであるため、parent() を使用する必要があります。また、ボタンが行内にあるデータ セル内に存在するため、parent() を 2 回使用する必要があります。削除したいもの。$(this) はクリックされたボタンなので、次のようにするだけでボタンのみが削除されます。

$(this).remove();

これによりデータセルが削除されますが：

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

行のどこかをクリックして削除したい場合は、次のようにします。これを簡単に変更して、ユーザーにプロンプ​​トを表示したり、ダブルクリックだけで作業したりできます。

$(".delete").live('click', function(event) {
    $(this).parent().remove();
});

お役に立てば幸いです...私はこれに少し苦労しました。

于 2009-03-29T04:58:14.883 に答える
43

次を使用できます。

$($(this).closest("tr"))

要素の親テーブル行を検索します。

それは私が始めてすぐに私のやり方の誤りを学んだものであるparent（）。parent（）よりもエレガントです。

-編集-質問は行の削除に関するものであると誰かが指摘しました...

$($(this).closest("tr")).remove()

以下で指摘するように、あなたは簡単に行うことができます：

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

同様のコードスニペットは、複数の要素でイベントを発生させるなど、多くの操作に使用できます。

于 2009-11-24T09:56:26.563 に答える
16

簡単..これを試してください

$("table td img.delete").click(function () {
    $(this).parent().parent().parent().fadeTo(400, 0, function () { 
        $(this).remove();
    });
    return false;
});
于 2010-01-11T05:20:01.237 に答える
9

テーブルの行 ( <tr>) タグをテーブルから削除するだけです。たとえば、テーブルから最後の行を削除するコードは次のとおりです。

$('#myTable tr:last').remove();

*上記のコードは、この jQuery Howto の投稿から取得したものです。

于 2009-05-02T10:02:49.157 に答える
9

以下は許容されますか?

$('#myTableRow').remove();
于 2008-10-04T21:04:56.480 に答える
8 
function removeRow(row) {
    $(row).remove();
}

<tr onmousedown="removeRow(this)"><td>Foo</td></tr>

たぶん、このようなものもうまくいくでしょうか？「これ」で何かをしようとしたことがないので、うまくいくかどうかはわかりません。

于 2008-10-04T21:48:55.113 に答える
8

サイズはこれを試してください

$(this).parents('tr').first().remove();

完全なリスト:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
        $('.deleteRowButton').click(DeleteRow);
      });

    function DeleteRow()
    {
      $(this).parents('tr').first().remove();
    }
  </script>
</head>
<body>
  <table>
    <tr><td>foo</td>
     <td><a class="deleteRowButton">delete row</a></td></tr>
    <tr><td>bar bar</td>
     <td><a class="deleteRowButton">delete row</a></td></tr>
    <tr><td>bazmati</td>
     <td><a class="deleteRowButton">delete row</a></td></tr>
  </table>
</body>
</html>

実際に見てください

于 2010-10-30T22:21:21.433 に答える
3

による別のものempty()：

$(this).closest('tr').empty();
于 2015-05-20T23:57:32.743 に答える
2

削除する行が変更される可能性がある場合は、これを使用できます。# 削除したい行にこの関数を渡すだけです。

function removeMyRow(docRowCount){
   $('table tr').eq(docRowCount).remove();
}
于 2013-01-11T20:46:04.330 に答える
2

このようなHTMLがある場合

<tr>
 <td><span class="spanUser" userid="123"></span></td>
 <td><span class="spanUser" userid="123"></span></td>
</tr>

はuserid="123"、テーブルを作成するときに動的に入力できるカスタム属性です。

次のようなものを使用できます

  $(".spanUser").live("click", function () {

        var span = $(this);   
        var userid = $(this).attr('userid');

        var currentURL = window.location.protocol + '//' + window.location.host;
        var url = currentURL + "/Account/DeleteUser/" + userid;

        $.post(url, function (data) {
          if (data) {
                   var tdTAG = span.parent(); // GET PARENT OF SPAN TAG
                   var trTAG = tdTAG.parent(); // GET PARENT OF TD TAG
                   trTAG.remove(); // DELETE TR TAG == DELETE AN ENTIRE TABLE ROW 
             } else {
                alert('Sorry, there is some error.');
            }
        }); 

     });

その場合、TRタグのクラスまたは ID はわかりませんが、とにかく削除することができます。

于 2013-05-06T12:44:45.877 に答える
1 
$('tr').click(function()
 {
  $(this).remove();
 });

上記のコードが機能するので試してみると思いますが、なぜそれがしばらく機能し、その後テーブル全体が削除されるのかわかりません。行をクリックして行を削除しようとしています。しかし、正確な答えを見つけることができませんでした。

于 2008-10-11T14:41:35.473 に答える
1

これは古い投稿であることを感謝しますが、同じことをしようとしていましたが、受け入れられた答えがうまくいかないことがわかりました。これが書かれてから JQuery が進化したと仮定します。

とにかく、私は次のことがうまくいったことを発見しました：

$('#resultstbl tr[id=nameoftr]').remove();

これが誰かに役立つかどうかはわかりません。上記の例は、より大きな関数の一部であったため、イベント リスナーにラップしていません。

于 2016-08-19T12:55:30.583 に答える
0

テーブルから行を削除する最も簡単な方法:

  1. 一意の ID を使用してテーブルの行を削除します。
  2. その行の順序/インデックスに基づいて削除します。例: 3 行目または 5 行目を削除します。

例えば：

 <table id='myTable' border='1'>
    <tr id='tr1'><td>Row1</td></tr>
    <tr id='tr2'><td>Row2</td></tr>
    <tr id='tr3'><td>Row3</td></tr>
    <tr id='tr4'><td>Row4</td></tr>
    <tr id='tr5'><td>Row5</td></tr>
  </table>

//======REMOVE TABLE ROW=========
//1. remove spesific row using its ID
$('#tr1').remove();

//2. remove spesific row using its order or index.
//row index started from 0-n. Row1 index is 0, Row2 index is 1 and so on.
$('#myTable').find('tr:eq(2)').remove();//removing Row3
于 2019-11-05T08:23:53.747 に答える