Удалить последнюю строку таблицы, добавленную программно в таблицу HTML

Question

Я разрабатываю приложение ASP.NET Web Api 2.2 с .NET Framework 4.5, C# и jQuery.

У меня есть эта таблица по мнению:

<table id ="batchTable" class="order-list"> 
    <thead> 
     <tr> 
      <td> 
       <h4>Product</h4> 
      </td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td> 
       <h4>Codes</span></h4> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <h4>Label1</h4> 
      </td> 
      <td> 
       <h4>Label2</h4> 
      </td> 
      <td> 
       <h4>Label3</h4> 
      </td> 
      <td> 
       <h4>Label4</h4> 
      </td> 
      <td> 
       <h4>Label5</h4> 
      </td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
       <div class="group"> 
        <input type="text" 
         name="BatchProducts[0].BatchName" 
         id="BatchProducts[0].BatchName" 
         required /> 
        @*<span class="highlight"></span> 
        <span class="bar"></span> 
        <label>Name</label>*@ 
       </div> 
      </td> 
      <td> 
       <div class="group"> 
        <input type="text" 
         name="BatchProducts[0].BatchPO" 
         id="BatchProducts[0].BatchPO" 
         required /> 
        @*<span class="highlight"></span> 
        <span class="bar"></span> 
        <label>PO</label>*@ 
       </div> 
      </td> 
      <td> 
       <div class="group">  
        <input type="text" class="datepicker" 
         name="BatchProducts[0].MadeDate" 
         id="BatchProducts[0].MadeDate" 
         required /> 
        @*<span class="highlight"></span> 
        <span class="bar"></span> 
        <label>Made</label>*@ 
       </div> 
      </td> 
      <td> 
       <div class="group">  
        <input type="text" class="monthPicker" 
         name="BatchProducts[0].ValidateDate" 
         id="BatchProducts[0].ValidateDate" 
         required /> 
        @*<span class="highlight"></span> 
        <span class="bar"></span> 
        <label>Validate</label>*@ 
       </div> 
      </td> 
      <td> 
       <div class="group">  
        <input type="text" class="quantity" 
         name="BatchProducts[0].Quantity" 
         id="BatchProducts[0].Quantity" 
         onkeydown='return (window.event.keyCode >= 48 && window.event.keyCode <= 57) || window.event.keyCode == 8 || window.event.keyCode == 46' 
         required /> 
        @*<span class="highlight"></span> 
        <span class="bar"></span> 
        <label>Quantity</label>*@ 
       </div> 
      </td> 
     </tr> 
    </tbody> 
    <tfoot> 
     <tr> 
      <td colspan="5"> 
       <table> 
        <tr> 
         <td style="text-align: left;"> 
          <input type="button" id="addrow" value="Add" /> 
         </td> 
         <td> 
          <input type="button" class="ibtnDel" value="Delete last row"> 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </tfoot> 
</table> 

Я использую JQuery, чтобы добавить новые строки динамически, когда пользователь нажимает на addRow кнопку, и пользователи могут также удалить последнюю одну строку при нажатии на кнопку ibtnDel.

У меня проблемы с кнопкой удаления. Это ее JavaScript:

$("table.order-list").on("click", ".ibtnDel", function (event) { 
    $('table.order-list').each(function() { 
     if ($('table.order-list > tbody > tr', this).length > 0) { 
      $('table.order-list tbody tr:last', this).remove(); 
     } else { 
      $('tr:last', this).remove(); 
     } 
    }); 

    counter -= 1 
    $('#addrow').attr('disabled', false).prop('value', "Add"); 
}); 

Но это не работает, потому что if ($('table.order-list > tbody > tr', this).length > 0) всегда возвращает 0. Этот код удаления tr, где кнопки Add и Delete last row являются.

Этот код:

if ($('tbody', this).length > 0) { 
    $('tbody tr:last', this).remove(); 

Работали, когда две кнопки Add и Delete last row не были внутри во внутренней таблице.

<tfoot> 
    <tr> 
     <td style="text-align: left;"> 
      <input type="button" id="addrow" value="Add" /> 
     </td> 
     <td> 
      <input type="button" class="ibtnDel" value="Delete last row"> 
     </td> 
    </tr> 
</tfoot> 

Как я могу заставить его работать?

JSFidle: https://jsfiddle.net/VansFannel/fa0z225s/12/ Это мой первый JSFidle, и он не работает. Я не знаю, можете ли вы его отредактировать.

Answer 1

попробовать что-то вроде этого ......

$("table.order-list").on("click", ".ibtnDel", function (event) { 
    if ($('table.order-list > tbody > tr') { 
     $('table.order-list > tbody >tr:last-child').remove(); 
    } 
counter -= 1 
$('#addrow').attr('disabled', false).prop('value', "Add"); 
}); 

Answer 2

this в $('table.order-list > tbody > tr', this) контекст смотреть изнутри. так this в $('table.order-list').each(function() { это таблица, где вы пытаетесь искать table.order-list внутри себя ->

$("table.order-list").on("click", ".ibtnDel", function (event) { 
    $('table.order-list').each(function() { 
     // 'this' is now a table element with the class 'order-list' 
     if ($('table.order-list > tbody > tr', this).length > 0) { 
     // here you are looking for table.order-list inside 'this' which 
     // is already that element. 

так, вы могли бы изменить это: -

$("table.order-list").on("click", ".ibtnDel", function (event) { 
    if ($('table.order-list > tbody > tr').length > 0) { 
     $('table.order-list > tbody > tr:last').remove(); 
    } 
}); 

FIDDLE

или если у вас есть несколько таблиц: -

$("table.order-list").on("click", ".ibtnDel", function (event) { 
    var table = $(this).closest('table'); 
    if ($('tbody > tr', table).length > 0) { 
     $('tbody > tr:last', table).remove(); 
    } 
}); 

FIDDLE

UPDATE

Если вы используете таблицу в таблице, то вам нужно быть более конкретным с селектором.Один из способов сделать это является использование >, что означает прямой/непосредственный ребенок: -

$("table.order-list").on("click", ".ibtnDel", function(event) { 
    if ($('table.order-list > tbody > tr').length > 0) { 
     $('table.order-list > tbody > tr:last').remove(); 
    } 

    counter -= 1 
    $('#addrow').attr('disabled', false).prop('value', "Añadir otro lote"); 
}); 

FIDDLE

Answer 3

В вашем коде, эта строка $('table.order-list > tbody > tr', this).length находит элементы tr внутри tbody имеющим родитель table.order-list внутри this элемента, означает, что вы находите элементы внутри таблицы. так что просто изменить код, как

$('tbody > tr', this).length

И

$('tbody tr:last', this).remove()

Answer 4

Пожалуйста, проверьте этот, это может помочь вам сохранить вашу кнопку строку на последней позиции

<table id="myTable" border="1"> 
    <tbody> 
    <tr> 
     <th>Table Header</th> 
     <th>Table Header</th> 
    </tr> 
    <tr> 
     <td>Table cell 1</td> 
     <td>Table cell 2</td> 
    </tr> 
    <tr> 
     <td>Table cell 3</td> 
     <td>Table cell 4</td> 
    </tr> 
    <tr> 
     <td><button type="button" class="ibtnAdd">Add Row</button></td> 
     <td><button type="button" class="ibtnDel">Remove Row</button></td> 
    </tr> 
    </tbody> 
</table> 


<script> 
$("table#myTable").on("click", ".ibtnDel", function (event) { 
    var table = $(this).closest('table'); 
    var rowLen = $(table).find('tr').length-2; 
    $('tbody > tr').eq($(table).find('tr').length-2).remove(); 
}); 
</script> 

DEMOFIDDLE