Jaki jest najlepszy sposób na usunięcie wiersza tabeli za pomocą jQuery?

Odpowiedzi:

434

Masz rację:

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

Działa to dobrze, jeśli Twój wiersz zawiera id:

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

Jeśli nie masz id, możesz użyć dowolnego z wielu selektorów jQuery .

imjoevasquez
źródło
Tak, zakładałem, że wiersz ma identyfikator, a ty masz identyfikator :)
Darryl Hein
2
Zrobienie tego w ten sposób oznacza, że ​​potrzebujesz jednego identyfikatora na wiersz, co potencjalnie może spowodować duże obciążenie. jQuery pozwala na inne podejścia, które są bardziej idiomatyczne (do podejścia jQuery), czytaj dalej, jest więcej sugestii.
Ian Lewis,
Świetnie mi działało, ponieważ mogłem umieścić unikalny identyfikator w każdym wierszu.
Jim Evans
2
Niesamowite rzeczy! JQuery to przyszłość!
heinkasner
1
„Jefe, co to jest mnóstwo?”
Pete,
110 
$('#myTable tr').click(function(){
    $(this).remove();
    return false;
});

Jeszcze lepszy 

$("#MyTable").on("click", "#DeleteButton", function() {
   $(this).closest("tr").remove();
});
pseudonim
źródło
4
Dziwne, twoje rozwiązanie jest nieskończenie lepsze niż przyjęte.
Relaks na Cyprze
3
@jorg, żeby wspomnieć, masz literówkę w swojej odpowiedzi, po .kliknij musisz oddzwonić do funkcji ()
Franco
7
również $ (this) .closest ('tr'). remove ();
LeRoy,
61

Zakładając, że masz przycisk / łącze w komórce danych w tabeli, coś takiego by załatwiło sprawę ...

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

Spowoduje to usunięcie elementu nadrzędnego elementu nadrzędnego klikniętego przycisku / łącza. Musisz użyć parent (), ponieważ jest to obiekt jQuery, a nie normalny obiekt DOM, i musisz użyć parent () dwa razy, ponieważ przycisk znajduje się w komórce danych, która znajduje się w wierszu .... który jest co chcesz usunąć. $ (this) to kliknięty przycisk, więc samo posiadanie czegoś takiego spowoduje usunięcie tylko przycisku:

$(this).remove();

Chociaż spowoduje to usunięcie komórki danych:

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

Jeśli chcesz po prostu kliknąć dowolne miejsce w wierszu, aby je usunąć, coś takiego działałoby. Możesz to łatwo zmienić, aby monitować użytkownika lub pracować tylko przy podwójnym kliknięciu:

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

Mam nadzieję, że to pomaga ... Sam trochę sobie z tym poradziłem.

sluther
źródło
25
Co jeśli link nie znajduje się bezpośrednio w td, ale ma, powiedzmy, rozpiętość wokół niego? Myślę, że lepiej byłoby zrobić $ (this) .parents ('tr'). Remove (); aby sam mógł przejść po drzewie DOM, znajdź tr i usuń go.
Paolo Bergantino
2
To też by działało. Wszystko zależy od tego, gdzie w DOM znajduje się twój przycisk / link, dlatego podałem tyle przykładów i tak długich wyjaśnień.
sluther
2
Możesz także użyć $ (this) .parents ('tr')
cgreeno
7
.live zostało wycofane w jQuery 1.7 i usunięte w 1.9. Zobacz jQuery.live
42

Możesz użyć:

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

do znalezienia wiersza tabeli nadrzędnej elementu.

Jest bardziej elegancki niż parent (). Parent (), co właśnie zacząłem robić i wkrótce nauczyłem się błędów na swoich drogach.

--Edytuj - ktoś wskazał, że chodziło o usunięcie wiersza ...

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

Jak wskazano poniżej, możesz po prostu zrobić:

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

Podobny fragment kodu można zastosować do wielu operacji, takich jak uruchamianie zdarzeń na wielu elementach.

Ian Lewis
źródło
4
Nieco bardziej zwięzłe:$(this).closest("tr").remove()
Barry Kaye
15

Łatwo .. Spróbuj tego

$("table td img.delete").click(function () {
    $(this).parent().parent().parent().fadeTo(400, 0, function () { 
        $(this).remove();
    });
    return false;
});
Thurein
źródło
10
Zmieniłbym się $(this).parent().parent().parent()na $(this).closest('tr'). Jest bardziej solidny i wyraźnie pokazuje, co wybierasz.
nickf
10

Czy dopuszczalne jest:

$('#myTableRow').remove();
Darryl Hein
źródło
8 
function removeRow(row) {
    $(row).remove();
}

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

Może coś takiego może również działać? Nie próbowałem robić czegoś z „tym”, więc nie wiem, czy to działa, czy nie.

Eikern
źródło
1
Powiedziałbym, że byłoby trochę dziwnie, gdyby rząd znikał po kliknięciu. W tej chwili mam link do wiersza, aby usunąć wiersz.
Darryl Hein
8

Wszystko, co musisz zrobić, to usunąć <tr>tag table ( ) z tabeli. Na przykład tutaj jest kod do usunięcia ostatniego wiersza z tabeli:

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

* Powyższy kod pochodzi z tego postu jQuery Howto .

Uzbekjon
źródło
7

spróbuj tego dla rozmiaru

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

pełna lista:

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

zobacz to w akcji

Tim Abell
źródło
4

Kolejny empty():

$(this).closest('tr').empty();
Pichet Thantipiputpinyo
źródło
1
Czy to nie usuwa wszystkich <td>, ale nie <tr>? Domyślam się, że przeglądarka może automatycznie usunąć <tr>, ale podejrzewam, że nie ma takiej gwarancji.
Darryl Hein
2

Jeśli wiersz, który chcesz usunąć, może się zmienić, możesz go użyć. Po prostu przekaż tej funkcji wiersz #, który chcesz usunąć.

function removeMyRow(docRowCount){
   $('table tr').eq(docRowCount).remove();
}
silvster27
źródło
1 
$('tr').click(function()
 {
  $(this).remove();
 });

myślę, że wypróbujesz powyższy kod, ponieważ działa, ale nie wiem, dlaczego to działa przez jakiś czas, a następnie cała tabela jest usuwana. Próbuję również usunąć wiersz, klikając wiersz. ale nie mogłem znaleźć dokładnej odpowiedzi.

Asim Sajjad
źródło
Nie jestem pewien, czy próbowałeś już $ ('tr'). Live ("click", function () {$ (this) .remove ();});
gfivehost
1

jeśli masz taki HTML 

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

gdzie userid="123"jest niestandardowy atrybut, który można dynamicznie wypełniać podczas tworzenia tabeli,

możesz użyć czegoś takiego 

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

     });

W takim przypadku nie znasz klasy lub identyfikatora TRtagu, ale i tak możesz go usunąć.

Deweloper
źródło
myśl, że transmisja na żywo jest teraz przestarzała na korzyść on, $ (". spanUser"). on ('click', function () {
Tofuwarrior
1

Doceniam, że to stary post, ale chciałem zrobić to samo i stwierdziłem, że zaakceptowana odpowiedź nie działała dla mnie. Zakładając, że JQuery przeszedł od momentu napisania tego tekstu.

W każdym razie okazało się, że dla mnie zadziałały:

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

Nie jestem pewien, czy to komukolwiek pomaga. Mój przykład powyżej był częścią większej funkcji, więc nie zawijałem jej w detektorze zdarzeń.

SparkyUK2104
źródło
0

Jeśli używasz tabel rozruchowych

dodaj ten fragment kodu do 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);
};

Potem w twoim var allowedMethods = [

Dodaj 'removeRow'

Wreszcie możesz użyć $("#your-table").bootstrapTable('removeRow',{index:1});

Podziękowania dla tego postu

ricks
źródło
0

id nie jest teraz dobrym selektorem. Możesz zdefiniować niektóre właściwości w wierszach. I możesz użyć ich jako selektora.

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

i możesz użyć func, aby wybrać taki wiersz (ES6):

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

rowRemover('petshop','fish');
Kamuran Sönecek
źródło
0

Najłatwiejsza metoda usunięcia wierszy z tabeli:

  1. Usuń wiersz tabeli, używając jego unikalnego identyfikatora.
  2. Usuń na podstawie kolejności / indeksu tego wiersza. Np .: usuń trzeci lub piąty rząd.

Na przykład:

 <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
źródło