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


回答:


434

あなたが正しい:

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

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

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

がない場合はid、jQueryの多数のセレクターを使用できます。


ええ、私は行にIDがあり、あなたがIDを持っていると想定していました:)
Darryl Hein

2
この方法で行うと、行ごとに1つのIDが必要になり、オーバーヘッドが大幅に増える可能性があります。jQueryは、(jQueryのアプローチに対して)より慣用的な他のアプローチを許可します。
Ian Lewis

各行に一意のIDを入れることができたので、私にとってはうまくいきました。
ジムエヴァンス

2
すごいもの!jQueryは未来です。
heinkasner 2014

1
「ジェフェ、多すぎるとは?」
ピート

110
$('#myTable tr').click(function(){
    $(this).remove();
    return false;
});

さらに良いもの

$("#MyTable").on("click", "#DeleteButton", function() {
   $(this).closest("tr").remove();
});

4
奇妙なことに、あなたの解決策は受け入れられたものよりもはるかに優れています。
キプロスでリラックス14年

3
@jorg、ちょうどそれを言及するために、あなたはあなたの答えにタイプミスがあります、.clickの後でfunction()コールバックを入れなければなりません
Franco

7
また$(this).closest( 'tr')。remove();
LeRoy

61

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

$(".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();
});

それが役に立てば幸い...私はこれに少し苦労しました。


25
リンクがtdの内部に直接ないが、たとえばその周りにスパンがある場合はどうなりますか?$(this).parents( 'tr')。remove();を実行する方が良いと思います。DOMツリーを単独でたどり、trを見つけて削除します。
Paolo Bergantino、

2
それもうまくいくでしょう。それはすべて、DOMのどこにボタンやリンクがあるかに依存します。そのため、私は非常に多くの例と長い説明を提供しました。
痴女2009年

2
$(this).parents( 'tr')を使用することもできます
cgreeno

7
.liveはjQuery 1.7で廃止され、1.9で削除されました。参照jQuery.live

42

以下を使用できます。

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

要素の親テーブル行を見つけるため。

それは私が始めたものであり、すぐに私の方法のエラーを学びましたparent()。parent()よりもエレガントです。

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

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

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

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

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


4
もう少し簡潔:$(this).closest("tr").remove()
Barry Kaye

15

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

$("table td img.delete").click(function () {
    $(this).parent().parent().parent().fadeTo(400, 0, function () { 
        $(this).remove();
    });
    return false;
});

10
に変更$(this).parent().parent().parent()$(this).closest('tr')ます。より堅牢で、選択対象を明確に示します。
nickf 2011


8
function removeRow(row) {
    $(row).remove();
}

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

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


1
まあ、それをクリックすると行が消えるのは少し変だと思います。現時点では、行に行を削除するためのリンクがあります。
ダリル・ハイン

8

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

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

*上記のコードは、このjQuery Howtoの投稿から取得されました。


7

サイズを試してみてください

$(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>

実際に見る



2

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

function removeMyRow(docRowCount){
   $('table tr').eq(docRowCount).remove();
}

1
$('tr').click(function()
 {
  $(this).remove();
 });

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


$( 'tr')。live( "click"、function(){$(this).remove();});をすでに試したかどうかはわかりません。
gfivehost

1

あなたがこのような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 はわかりませんが、とにかくそれを削除できます。


{ライブは今の賛成で廃止されましたと思いますが、$( "spanUser。")( 'クリック'に、機能()。
Tofuwarrior

1

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

とにかく、私は次のことがうまくいったことがわかりました:

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

これが誰かを助けるかどうかわかりません。上記の例は、より大きな関数の一部なので、イベントリスナーでラップしていません。


0

ブートストラップテーブルを使用している場合

このコードスニペットをbootstrap_table.jsに追加します

BootstrapTable.prototype.removeRow = function (params) {
    if (!params.hasOwnProperty('index')) {
        return;
    }

    var len = this.options.data.length;

    if ((params.index > len) || (params.index < 0)){
        return;
    }

    this.options.data.splice(params.index, 1);

    if (len === this.options.data.length) {
        return;
    }

    this.initSearch();
    this.initPagination();
    this.initBody(true);
};

次にあなたの var allowedMethods = [

追加 'removeRow'

最後に使用できます $("#your-table").bootstrapTable('removeRow',{index:1});

この投稿のクレジット


0

現在、idは適切なセレクタではありません。行にいくつかのプロパティを定義できます。そして、それらをセレクターとして使用できます。

<tr category="petshop" type="fish"><td>little fish</td></tr>
<tr category="petshop" type="dog"><td>little dog</td></tr>
<tr category="toys" type="lego"><td>lego starwars</td></tr>

そして、funcを使用して次のような行を選択できます(ES6)。

const rowRemover = (category,type)=>{
   $(`tr[category=${category}][type=${type}]`).remove();
}

rowRemover('petshop','fish');

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
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.