asked on

I want to delete particular row when I click on delete icon ?

I want to delete particular row when I click on delete icon ?
Append row working fine when I click on '+' sign

JavaScript Code :

<script type="text/javascript">
  var count=2;
  function addnewrow()
  {
    
    var div = '<div class="row col-md-12" id="row'+count+'">'+
    '<div class="col-md-2">'+
        '<div class="form-group">'+
          '<label for="p_type"><font color="red">*</font>Product Type</label>'+

          '<select id="p_type" name="p_type" onChange="getCatg(this.value,'+count+');" class="form-control" tabindex="1" required>'+
            '<option>Select Product Type</option>'+
            '<option value="Goods">Goods</option>'+
            '<option value="Service">Service</option>'+
          '</select>'+
        '</div>'+
    '</div>'+

    '<div class="col-md-3">'+
      '<div class="form-group">'+
        '<label for="c_name"><font color="red">*</font>Sub-Category</label>'+
        '<select name="c_id" id="c_id_'+count+'" onChange="getProd(this.value,'+count+');" class="form-control" required>'+
          '<option>Select Sub-Category</option>'+
        '</select>'+
      '</div>'+
    '</div>'+
'</div>'+

'<div class="col-md-12">'+
  '<div class="table-responsive">'+
'<table  class="table table-bordered table-hover">'+
          '<thead>'+
            '<tr>'+
              '<th width="20%">Item Details</th>'+
              '<th width="20%">Vendor Name</th>'+
              '<th width="20%">Quantity</th>'+
              '<th width="20%">Rate</th>'+
              '<th width="20%">Amount</th>'+
            '</tr>'+
          '</thead>'+
          
          '<tr>'+
            '<td>'+
             '<select name="p_id" tabindex="11" onChange="getVendor(this.value,'+count+');" class="form-control" id="p_id_'+count+'" required>'+
                '<option>Select any one</option>'+
              '</select>'+
            '</td>'+
            '<td>'+
              '<select name="v_id" tabindex="11" onChange="getPrice(this.value,'+count+');" class="form-control" id="v_id_'+count+'" required>'+
              '<option>Select any one</option>'+
          '</select>'+
            '</td>'+
              '<td><input type="number" name="quantity" class="form-control" id="quantity_'+count+'" onblur="calculate('+count+')" required/></td>'+
            '<td>'+
              '<input type="number" name="product_price" id="product_price_'+count+'" class="form-control" />'+
            '</td>'+
            '<td>'+
              '<input type="number" name="amount" id="amount_'+count+'" class="form-control" readonly/>'+
            '</td>'+
            '<td width="2%">'+
                '<i class="fa fa-trash" aria-hidden="true" id="row'+count+'" onclick="removerow('+count+')"></i>'+
                '<i class="fa fa-plus" aria-hidden="true" onclick="addnewrow()"></td>'+
          '</tr>'+
'</table>'+
  '</div>';
$('#new_row').append(div);

count++;
}

function removerow()
  {
    $('#new_row').remove('+count+');
    count--;
  }

Open in new window

HTML Code

<div id="new_row">

<div class="row col-md-12" id="row1">
    <div class="col-md-2">
        <div class="form-group">
          <label for="p_type"><font color="red">*</font>Product Type</label>

          <select id="p_type" name="p_type" onChange="getCatg(this.value,1);" class="form-control" tabindex="1" required>
            <option>Select Product Type</option>
            <option value="Goods">Goods</option>
            <option value="Service">Service</option>
          </select>
        </div>
    </div>

    <div class="col-md-3">
      <div class="form-group">
        <label for="c_name"><font color="red">*</font>Sub-Category</label>
        <select name="c_id" id="c_id_1" onChange="getProd(this.value,1);" class="form-control" required>
          <option>Select Sub-Category</option>
        </select>
      </div>
    </div>
</div>

<div class="col-md-12">
  <div class="table-responsive">
<table  class="table table-bordered table-hover">
          <thead>
            <tr>
              <th width="20%">Item Details</th>
              <th width="20%">Vendor Name</th>
              <th width="20%">Quantity</th>
              <th width="20%">Rate</th>
              <th width="20%">Amount</th>
            </tr>
          </thead>
          
          <tr>
            <td>
              <select name="p_id" tabindex="11" onChange="getVendor(this.value,1);" class="form-control" id="p_id_1" required>
                <option>Select any one</option>
              </select>
            </td>
            <td>
              <select name="v_id" tabindex="11" onChange="getPrice(this.value,1);" class="form-control" id="v_id_1" required>
              <option>Select any one</option>
          </select>
            </td>
              <td><input type="number" name="quantity" class="form-control" id="quantity_1" onblur="calculate(1)" required/></td>
            <td>                
              <input type="number" name="product_price" id="product_price_1" class="form-control" readonly/>
            </td>
            <td>
              <input type="number" name="amount" id="amount_1" onchange="subtotal(1)" class="form-control" readonly/>
            </td>
            <td width="2%">              
                <i class="fa fa-trash" aria-hidden="true" id="row1" onclick="removerow(1)"></i>
                <i class="fa fa-plus" aria-hidden="true" onclick="addnewrow()"></td>
          </tr>
</table>
  </div>
</div>

Open in new window

Joel Tuffin

I think this might work but haven't tested.

function removerow(rowNumber)
  {
    $('row'+rowNumber).remove();
    count--;
  }

Open in new window

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Joel Tuffin

As per Chris's comment above, it is a lot nicer to break out all your JS event handling from your HTML.

Here is a very basic example of what I think you are trying to achieve -> https://jsfiddle.net/xpvt214o/596927/

PS. Chris sounds like he knows more than me, so I'm more than happy to be corrected!

Chris Stanyon

Hey @Joel,

Yep - that's exactly the method I was talking about.

Something I would suggest is that when you delegate events with on(), you delegate to an element as close to the target as possible, for performance reasons. So instead of binding to document, maybe bind to container:

$('#container').on("click", ".addrow", function() {

instead of

$(document).on("click", ".addrow", function() {

In this example, it's trivial, but it's a good habit to get into.

Also, rather than building your template row in Javascript, you build it in the HTML (and hide it). It's just about separation of concerns. In this instance it's again trivial, but as a site grows, you may end up with a lot of HTML scattered across several Javascript files, rather than the correct HTML belonging to the correct HTML file. It's also easier to manager (PHP injected code / no need to strange concatenation etc).

Jitender Yadav

Best way to delete a table row :

$('table').on('click', '.fa-trash', function(){
    $(this).closest ('tr').remove ();
});

Open in new window