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

您可以使用jQuery的has（）函數來實現。

 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

這是一個動態創建帶有可單擊以刪除該行的按鈕的表格行的最小示例。

刪除代碼將event的target定位在click處理程序上，並且由於<button>在<tr> （2）的<td> （1）中，因此必須調用.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>