Apa cara terbaik untuk menghapus baris tabel dengan jQuery?

Jawaban:

434

Kamu benar:

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

Ini berfungsi dengan baik jika baris Anda memiliki id, seperti:

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

Jika Anda tidak memiliki id, Anda dapat menggunakan sebagian besar pemilih pemilih jQuery .

imjoevasquez
sumber
Ya, saya mengasumsikan baris memiliki ID dan Anda memiliki ID :)
Darryl Hein
2
Melakukannya dengan cara ini berarti Anda memerlukan satu id per baris yang berpotensi menambah banyak overhead. jQuery memungkinkan pendekatan lain yang lebih idiomatis (untuk pendekatan jQuery), teruskan membaca ada lebih banyak saran.
Ian Lewis
Bekerja sangat baik untuk saya karena saya dapat menempatkan id unik di setiap baris.
Jim Evans
2
Hal yang luar biasa! JQuery adalah masa depan!
heinkasner
1
"Jefe, apa itu kebanyakan?"
Pete
110 
$('#myTable tr').click(function(){
    $(this).remove();
    return false;
});

Bahkan yang lebih baik 

$("#MyTable").on("click", "#DeleteButton", function() {
   $(this).closest("tr").remove();
});
nickf
sumber
4
Aneh, solusi Anda jauh lebih baik daripada yang diterima.
Bersantai Di Siprus
3
@ jorg, hanya untuk menyebutkannya, Anda memiliki kesalahan ketik dalam jawaban Anda, setelah klik. Anda harus meletakkan fungsi () memanggil kembali
Franco
7
juga $ (ini) .closest ('tr'). remove ();
LeRoy
61

Dengan anggapan Anda memiliki tombol / tautan di dalam sel data di meja Anda, sesuatu seperti ini akan membantu ...

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

Ini akan menghapus induk dari tombol / tautan yang diklik. Anda perlu menggunakan parent () karena itu adalah objek jQuery, bukan objek DOM normal, dan Anda perlu menggunakan parent () dua kali, karena tombolnya hidup di dalam sel data, yang hidup di dalam baris .... yang apa yang ingin Anda hapus. $ (ini) adalah tombol yang diklik, jadi memiliki sesuatu seperti ini hanya akan menghapus tombol:

$(this).remove();

Sementara ini akan menghapus sel data:

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

Jika Anda hanya ingin mengklik di mana saja pada baris untuk menghapusnya sesuatu seperti ini akan berhasil. Anda dapat dengan mudah memodifikasi ini untuk meminta pengguna atau hanya bekerja pada klik dua kali:

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

Semoga itu bisa membantu ... Saya sendiri sedikit kesulitan dalam hal ini.

sluther
sumber
25
Bagaimana jika tautannya tidak langsung di dalam td, tetapi memiliki, katakanlah, rentang di sekitarnya? Saya pikir akan lebih baik melakukan $ (this) .parents ('tr'). Remove (); untuk membiarkannya berjalan di atas pohon DOM dengan sendirinya, temukan tr, dan lepaskan.
Paolo Bergantino
2
Itu juga akan berhasil. Itu semua tergantung di mana di DOM tombol / tautan Anda, itulah sebabnya saya memberikan banyak contoh dan penjelasan yang panjang.
Sluther
2
Anda juga dapat menggunakan $ (ini) .parents ('tr')
cgreeno
7
.live sudah tidak digunakan lagi di jQuery 1.7, dan dihapus di 1.9. Lihat jQuery.live
42

Kamu bisa memakai:

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

untuk menemukan baris tabel induk suatu elemen.

Ini lebih elegan daripada parent (). Parent () yang merupakan apa yang saya mulai lakukan dan segera belajar kesalahan dari cara saya.

--Edit - Seseorang menunjukkan bahwa pertanyaannya adalah tentang menghapus baris ...

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

Seperti yang ditunjukkan di bawah ini, Anda cukup melakukan:

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

Cuplikan kode serupa dapat digunakan untuk banyak operasi seperti memecat peristiwa pada banyak elemen.

Ian Lewis
sumber
4
Sedikit lebih ringkas:$(this).closest("tr").remove()
Barry Kaye
15

Mudah .. Coba ini

$("table td img.delete").click(function () {
    $(this).parent().parent().parent().fadeTo(400, 0, function () { 
        $(this).remove();
    });
    return false;
});
Thurein
sumber
10
Saya akan berubah $(this).parent().parent().parent()menjadi $(this).closest('tr'). Ini lebih kuat dan jelas menunjukkan apa yang Anda pilih.
nickf
10

Apakah yang berikut ini dapat diterima:

$('#myTableRow').remove();
Darryl Hein
sumber
8 
function removeRow(row) {
    $(row).remove();
}

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

Mungkin sesuatu seperti ini bisa bekerja juga? Saya belum mencoba melakukan sesuatu dengan "ini", jadi saya tidak tahu apakah itu berfungsi atau tidak.

Eikern
sumber
1
Yah, saya akan mengatakan bahwa akan sedikit aneh jika barisnya menghilang ketika Anda mengkliknya. Saat ini saya memiliki tautan di baris untuk menghapus baris.
Darryl Hein
8

Yang harus Anda lakukan adalah menghapus <tr>tag baris tabel ( ) dari tabel Anda. Misalnya di sini adalah kode untuk menghapus baris terakhir dari tabel:

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

* Kode di atas diambil dari posting Howto jQuery ini .

Uzbekjon
sumber
7

coba ini untuk ukuran

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

daftar lengkap:

<!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>

melihatnya dalam aksi

Tim Abell
sumber
4

Satu lagi oleh empty():

$(this).closest('tr').empty();
Pichet Thantipiputpinyo
sumber
1
Bukankah itu menghapus semua <td> tetapi bukan <tr>? Saya menduga browser dapat menghapus <tr> secara otomatis, tapi saya kira itu tidak dijamin.
Darryl Hein
2

Jika baris yang ingin Anda hapus dapat berubah, Anda dapat menggunakan ini. Lewati saja fungsi ini baris # yang ingin Anda hapus.

function removeMyRow(docRowCount){
   $('table tr').eq(docRowCount).remove();
}
silvster27
sumber
1 
$('tr').click(function()
 {
  $(this).remove();
 });

Saya pikir Anda akan mencoba kode di atas, karena berfungsi, tetapi saya tidak tahu mengapa itu bekerja untuk beberapa saat dan kemudian seluruh tabel dihapus. saya juga mencoba menghapus baris dengan mengklik baris. tetapi tidak dapat menemukan jawaban yang tepat.

Asim Sajjad
sumber
Saya tidak yakin apakah Anda sudah mencoba $ ('tr'). Live ("click", function () {$ (this) .remove ();});
gfivehost
1

jika Anda memiliki HTML seperti ini 

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

di mana userid="123"atribut khusus yang dapat Anda isi secara dinamis saat Anda membangun tabel,

Anda dapat menggunakan sesuatu seperti 

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

     });

Jadi dalam hal ini Anda tidak tahu kelas atau id dari TRtag tetapi Anda dapat menghapusnya.

Pengembang
sumber
think live sekarang tidak digunakan lagi pada on, $ (". spanUser"). on ('click', function () {
Tofuwarrior
1

Saya menghargai ini adalah posting lama, tetapi saya ingin melakukan hal yang sama, dan menemukan jawaban yang diterima tidak bekerja untuk saya. Dengan asumsi JQuery telah pindah sejak ini ditulis.

Bagaimanapun, saya menemukan yang berikut ini bekerja untuk saya:

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

Tidak yakin apakah ini membantu siapa pun. Contoh saya di atas adalah bagian dari fungsi yang lebih besar sehingga tidak membungkusnya dengan pendengar acara.

SparkyUK2104
sumber
0

Jika Anda menggunakan Tabel Bootstrap

tambahkan potongan kode ini ke bootstrap_table.js Anda

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);
};

Lalu di var allowedMethods = [

Menambahkan 'removeRow'

Akhirnya bisa Anda gunakan $("#your-table").bootstrapTable('removeRow',{index:1});

Kredit untuk pos ini

ricks
sumber
0

id bukan pemilih yang baik sekarang. Anda dapat mendefinisikan beberapa properti di baris. Dan Anda bisa menggunakannya sebagai pemilih.

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

dan Anda dapat menggunakan func untuk memilih baris seperti ini (ES6):

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

rowRemover('petshop','fish');
Kamuran Sönecek
sumber
0

Metode termudah untuk menghapus baris dari tabel:

  1. Hapus baris tabel menggunakan ID uniknya.
  2. Hapus berdasarkan urutan / indeks baris itu. Mis: hapus baris ketiga atau kelima.

Sebagai contoh:

 <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
Ayu Anggraeni
sumber