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

Jaka jest najlepsza metoda usuwania wiersza tabeli za pomocą jQuery?

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 .

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

Jeszcze lepszy

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

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.

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.

Łatwo .. Spróbuj tego

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

Czy dopuszczalne jest:

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

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.

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 .

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

Kolejny empty():

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

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

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

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ąć.

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

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

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

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