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