Question

我正在尝试在选中复选框时删除该行。它可以使用jquery一次一个或多个。但只有复选框被删除。我想删除整行。我无法弄清楚它是如何完成的。

HTML -

     <html>
        <body>
          <table id="pricetable" class="table">
                 <thead>
                     <tr>
                         <th>Size</th>
                         <th>Price</th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr>
                         <td>
                        <div class="form-group"> 
                        <select class="selectbox" name="Priority">
                        <option>0.5</option>
                        <option>1</option>
                        <option>2</option>
                        </select>     
                        </div>
                         </td>
                         <td>
                         <div class="form-group">
                          <input type="text" class="form-control" name="groceryName">
                         </div>
                         </td>
                         <td>
                              <input type="checkbox" name="check">
                         </td>
                     </tr>
<tr>
                         <td>
                        <div class="form-group"> 
                        <select class="selectbox" name="Priority">
                        <option>0.5</option>
                        <option>1</option>
                        <option>2</option>
                        </select>     
                        </div>
                         </td>
                         <td>
                         <div class="form-group">
                          <input type="text" class="form-control" name="groceryName">
                         </div>
                         </td>
                         <td>
                              <input type="checkbox" name="check">
                         </td>
                     </tr>
                 </tbody>
                 <br>

                     <button class="button btn btn-info" id="delrow">Delete row</button>
        </body>
        <script>

        $(document).ready(function(){
        $('#delrow').click(function(){
                $("#pricetable input:checkbox").each(function(){
                    if (this.checked) {
                         $(this).remove();
                    }
                    return false;  

                })
        });
        });

        </script>
        </html>

Answer 1

致电：$(this).closest('tr').remove();删除行

Answer 2

我不知道你是否在寻找这样的东西，但试一试：

$(document).ready(function(){
    $('#delrow').click(function(){
            $("#pricetable input:checkbox").each(function(){
                if (this.checked) {
                     $(this).parent().parent().remove();
                }
                return false;  

            })
    });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
    <body>
      <table id="pricetable" class="table">
             <thead>
                 <tr>
                     <th>Size</th>
                     <th>Price</th>
                 </tr>
             </thead>
             <tbody>
                 <tr>
                     <td>
                    <div class="form-group"> 
                    <select class="selectbox" name="Priority">
                    <option>0.5</option>
                    <option>1</option>
                    <option>2</option>
                    </select>     
                    </div>
                     </td>
                     <td>
                     <div class="form-group">
                      <input type="text" class="form-control" name="groceryName">
                     </div>
                     </td>
                     <td>
                          <input type="checkbox" name="check">
                     </td>
                 </tr>
             </tbody>
             <br>

                 <button class="button btn btn-info" id="delrow">Delete row</button>
    </body>
    </html>

Answer 3

您可以使用closest()标识:checked复选框的tr元素来遍历，然后可以使用remove()。

$('#delrow').click(function() {
    $("#pricetable input:checkbox:checked").closest('tr').remove();
});

 $(document).ready(function() {
   $('#delrow').click(function() {
     $("#pricetable input:checkbox:checked").closest('tr').remove();
   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="pricetable" class="table">
  <thead>
    <tr>
      <th>Size</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="form-group">
          <select class="selectbox" name="Priority">
            <option>0.5</option>
            <option>1</option>
            <option>2</option>
          </select>
        </div>
      </td>
      <td>
        <div class="form-group">
          <input type="text" class="form-control" name="groceryName">
        </div>
      </td>
      <td>
        <input type="checkbox" name="check">
      </td>
    </tr>
  </tbody>
  <br>

  <button class="button btn btn-info" id="delrow">Delete row</button>

Answer 4

您需要使用.closest()函数来获取最接近的tr并将其删除，请尝试：

$(document).ready(function(){
  $('#delrow').click(function(){
    $("#pricetable input:checkbox").each(function(){
      var obj = $(this);
      if (this.checked) {
        $(obj).closest("tr").remove();
      }
      return false;  
    });
  });
});

如果选中复选框，则删除行

4 个答案: