Why the table row is not getting deleted by using following code in jQuery?

Question

I've following HTML of a table. The actual table is too large. For your reference I've shown only two rows from this large HTML table:

<table   id="blacklistgrid"  class="table table-bordered table-hover table-striped">
  <thead>
    <tr  id="Row1">
      <th style="vertical-align:middle" >Pack Of</th>
      <th style="vertical-align:middle">Quantity</th>
      <th style="vertical-align:middle">Volume</th>
      <th style="vertical-align:middle">Unit</th>
      <th style="vertical-align:middle">Rebate Amount</th>
    </tr>
  </thead>
  <tbody class="apnd-test">
    <tr id="reb1">
      <td><input type="text" name="pack[1]" id="pack_1" value="100" class="form-control" size="8"/></td>
      <td><input type="text" name="quantity[1]" id="quantity_1" value="10" class="form-control" size="8"/></td>
      <td><input type="text" name="volume[1]" id="volume_1" value="1000" class="form-control" size="8"/></td>
      <td>
        <div class="btn-group">
          <select id="units_1" name="units[1]" class="form-control">
            <option value="" >Select Unit</option>
            <option value="5" >Microsecond</option>
            <option value="7" >oz</option>
            <option value="9" >ml</option>
            <option value="10" >L</option>
            <option value="12"  selected="selected">gms</option>
          </select>
        </div>
      </td>
      <td><input type="text" name="amount[1]" id="amount_1" value="3.00" class="form-control" size="9"/><button class="close" aria-hidden="true" data-dismiss="alert" onclick="delete_rebate(this.id);return false;" type="button" style="margin: -26px -14px;float: right; color:#C00; opacity: 2;">×</button></td>
    </tr>
    <tr id="reb2">
      <td><input type="text" name="pack[2]" id="pack_2" value="200" class="form-control" size="8"/></td>
      <td><input type="text" name="quantity[2]" id="quantity_2" value="20" class="form-control" size="8"/></td>
      <td><input type="text" name="volume[2]" id="volume_2" value="2000" class="form-control" size="8"/></td>
      <td>
        <div class="btn-group">
          <select id="units_2" name="units[2]" class="form-control">
            <option value="" >Select Unit</option>
            <option value="5" >Microsecond</option>
            <option value="7" >oz</option>
            <option value="9" >ml</option>
            <option value="10"  selected="selected">L</option>
            <option value="12" >gms</option>
          </select>
        </div>
      </td>
      <td><input type="text" name="amount[2]" id="amount_2" value="6.00" class="form-control" size="9"/><button class="close" aria-hidden="true" data-dismiss="alert" onclick="delete_rebate(this.id);return false;" type="button" style="margin: -26px -14px;float: right; color:#C00; opacity: 2;">×</button></td>
    </tr>
  </tbody>
</table>

The jQuery function I wrote is as follows:

function delete_rebate(field) {
  $('#'+field).remove();    
}

But it's not working. Can anyone please help me in this regard? If you want any more information regarding the issue I can provide you the same.

add an alert(field); to that function .. so you can see what the value of field is. you may not be passing the correct id to the delete_rebate function — lagbox, Apr 27 '14 at 15:56

score 0 · Answer 1 · answered Apr 27 '14 at 16:01

It would be helpful to see the call to the function.

I think you may have made a common problem with the id.

Do a console log to see what the value of field is inside your delete rebate.

keep in mind that writing a function that does only 1 short task like this will slow down and clutter your code.

Just use ELEMENT.remove(); its clean and simple.

if this is not working look into the jquery EQ function

score 0 · Answer 2 · answered Apr 27 '14 at 16:02

Are you making sure to call the function delete_rebate()? If so, you might be trying to call the function before the document is fully loaded. I tried this with a tr (id="reb2") and it worked:

    $(document).ready(function(){
        delete_rebate('reb2');
    });

    function delete_rebate(field) {
       $('#'+field).remove();    
    }

JSFiddle: http://jsfiddle.net/cAS9v/3/

score 0 · Answer 3 · answered Apr 27 '14 at 16:35

You are calling your function on the click of a button and use this.id. However in this context this refers to the button. Instead you need to look for the table row. ALso don't hard code your event handlers into the HTML, assign them:

$(".apnd-test button.close").click(function() {
  $(this).closest("tr").remove();
});

Why the table row is not getting deleted by using following code in jQuery?

3 Answers3