Удалить строку таблицы с помощью jquery

Question

Я добавляю несколько строк в таблицу. Теперь я хочу удалить строку, нажав на кнопку внутри этой строки. Моя логика добавления работает, но я не могу заставить мою работу по удалению.

HTML:

<table style="background-color:#ffe6e6;width:50%;"> 

       <tr><th colspan="6" style="border-bottom:1px solid #AAAAAA;">Credits</th></tr> 

       <tr><th>User</th><th>Account</th><th>Item</th><th>Unit Price</th> <th>Quantity</th><th>Amount</th></tr> 
       <tr id="student_entry"> 
       <td> 

        <select name="account" class="form-control" required style="width: 100px;"> 
         <option value=""><?php echo get_phrase('select_account');?></option> 
          <?php 
          $categories = $this->db->get_where('account', array('category1' => 'EXPENSE'))->result_array(); 
          foreach ($categories as $row): 
          ?> 
         <option value="<?php echo $row['componentId'];?>"><?php echo $row['description'];?></option> 
         <?php endforeach;?> 
        </select> 

       </td> 
       <td> 
        <select id="item_selector_holder" name="item[]" class="form-control" style="width: 100px; margin-left: 0px;"> 
        <option value=""><?php echo get_phrase('select_item');?></option> 
        <?php $categories = $this->db->get('item')->result_array(); 
         foreach ($categories as $row): 
        ?>  
         <option value="<?php echo $row['componentId'];?>"><?php echo $row['itemName'];?></option> 
        <?php endforeach;?> 
        </select> 

       </td> 
       <td> 
       <input type="text" style="width: 80px;" name="unitPrice" data-validate="required" data-message-required="<?php echo get_phrase('value_required');?>"/> 
       </td> 
       <td> 
       <input type="text" style="width: 80px;" name="unitPrice" data-validate="required" data-message-required="<?php echo get_phrase('value_required');?>"/> 
       </td> 
       <td> 
       <input type="text" style="width: 80px;" name="quantity" data-validate="required" data-message-required="<?php echo get_phrase('value_required');?>"/> 
       </td> 
       <td> 
       <span style="margin-right: 0px; padding-left: 20px"> 
        <input onclick="deleteParentElement();" type="button" style="width: 3px; font-weight: bold;font-size: large;" value="-"/> 
       </span> 
       </td> 

      </tr> 
      <tr id="student_entry_append2"></tr> 
       <tr><th> <input onclick="append_credit_table_row();" type="button" style="padding: 3px 8px;font-weight: bold;font-size: large;" value=" + "/> </th><th colspan="3">Total</th><th id="ttlcr">0.00</th></tr> 

      </table> 

JavaScript:

<script type="text/javascript"> 
    var blank_student_entry =''; 
    $(document).ready(function() { 
     //$('#bulk_add_form').hide(); 
     blank_student_entry = $('#student_entry').html(); 
     for ($i = 1; $i<1;$i++) { 
      $("#student_entry").append(blank_student_entry); 
     } 

    }); 

    function append_credit_table_row() 
    { 
     $("#student_entry_append2").after('<tr>' +blank_student_entry +'</tr>'); 
    } 

    // REMOVING INVOICE ENTRY 
    function deleteParentElement() 
    { 
     $(this).parent().parent().parent().remove(); 

    } 
</script> 

Пожалуйста, кто может помочь, или предложить решение?

Answer 1

Вы можете achive это с помощью has() функции JQuery в.

function deleteParentElement(item) { 
 
    $("tr").has($(item)).remove(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <span>     <!-- important --> 
 
     <input onclick="deleteParentElement(this);" type="button" value="delete1"/> 
 
     This is a row 1 
 
     </span> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <span>     <!-- important --> 
 
     <input onclick="deleteParentElement(this);" type="button" value="delete2"/> 
 
     This is a row 2 
 
     </span> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <span>     <!-- important --> 
 
     <input onclick="deleteParentElement(this);" type="button" value="delete3"/> 
 
     This is a row 3 
 
     </span> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <span>     <!-- important --> 
 
     <input onclick="deleteParentElement(this);" type="button" value="delete4"/> 
 
     This is a row 4 
 
     </span> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <span>     <!-- important --> 
 
     <input onclick="deleteParentElement(this);" type="button" value="delete5"/> 
 
     This is a row 5 
 
     </span> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <span>     <!-- important --> 
 
     <input onclick="deleteParentElement(this);" type="button" value="delete6"/> 
 
     This is a row 6 
 
     </span> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

Вот минимальный пример динамического создания строки таблицы с кнопкой, которую можно щелкнуть, чтобы удалить строку.

Код удаления находит target в event на click обработчика и потому, что <button> находится в <td> (1) в <tr> (2) вы должны вызвать .parent() дважды.

Вот стопка фрагмент:

var index = 0; 
 

 
$('#test_add').on('click', function() { 
 
    index += 1; 
 
    var template_row = '<tr><td><button class="row_remove_btn">Remove</button></td><td>Foo' + index + '</td><td>Bar' + index + '</td></tr>'; 
 
    $('#t tbody').append(template_row); 
 
}); 
 

 
$('#t').on('click', 'button.row_remove_btn', function(event) { 
 
    var row = $(event.target).parent().parent(); 
 
    row.remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="test_add">Add Row</button> 
 

 
<table id="t"> 
 
    <tbody> 
 
    </tbody> 
 
</table>