delete row if checkbox is selected

Question

I am trying to delete the row when checkbox is selected. It can be one or many at a time using jquery. But only checkbox is getting deleted.I want to delete full row.I am not able to figure out how it will be done.

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>

Adil Shaikh · Accepted Answer · 2016-06-30 07:15:20Z

2

Call : $(this).closest('tr').remove(); to remove the row

answered Jun 30, 2016 at 7:15

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roxoradev · Accepted Answer · 2016-06-30 07:15:13Z

I don't know if you're looking for something like this but give it a try:

$(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>

Satpal · Accepted Answer · 2016-06-30 07:15:29Z

You can traverse up by using closest() to identify tr element for :checked checkbox's then remove() can be used.

$('#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>

Jayesh Chitroda · Accepted Answer · 2016-06-30 07:20:35Z

0

You need to use .closest() function to get closest tr and delete it, Try:

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

answered Jun 30, 2016 at 7:20

Jayesh Chitroda

5,03915 silver badges18 bronze badges

Collectives™ on Stack Overflow

delete row if checkbox is selected

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related