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

Nikhil DangePHP Web DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Joel TuffinI'll figure it out.Commented:
I think this might work but haven't tested.

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

Open in new window

0
Chris StanyonWebDevCommented:
Hey Nikhil,

Generally speaking, I would remove all the references to count. It's unnecessary and will cause you problems. For example, if you have a count of 2, you will have 2 rows - #row1, #row2. If you remove #row1, you will have a count of 1. Add a new row and you'll then have 2 rows both with an id of row2. A delete button would then remove both rows! It will also make adding a new row easier, as you can just clone a ready built HTML block without having to manually re-create it.

As you're using jQuery, you should really be using an unobtrusive approach, so rather than setting up an onChange, onClick etc, you should really be binding the events within the jQuery blocks.

To remove the rows, I would add an identifier class to each wrapper row, such as productRow:

<div class="row col-md-12 productRow" id="row1">

Then instead of passing in the row ID, you just pass in this

onclick="removerow(this)"

And your function can traverse the DOM to find the parent row:

function removerow(parentRow)
{
    $(parentRow).parents('.parentRow').remove();
}

Open in new window

If you want to go the unobtrusive route (and you probably should), add an identifier class to your button, such as deleteRow. You can then bind the click event directly to that. Remove the onclick from the button and add this in your jQuery dom ready block:

$('.deleteRow').click(function() {
    $(this).parents('.parentRow').remove();
});

Open in new window

The HTML would look like this:

<i class="fa fa-trash deleteRow" aria-hidden="true"></i>

If you want to make the addNewRow easier, then you could end up with something like this:

<i class="fa fa-plus addRow" aria-hidden="true">

$('.addRow').click(function() {
    var newRow = $('#defaultRow').clone(true).removeAttr('id');
    $('#new_row').append(newRow);
});

Open in new window

Just create a hidden row with an ID of #defaultRow, ready to be cloned straight into your DOM.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Joel TuffinI'll figure it out.Commented:
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!
1
Chris StanyonWebDevCommented:
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).
1
Jitender YadavSr. Salesforce ConsultantCommented:
Best way to delete a table row  :
$('table').on('click', '.fa-trash', function(){
    $(this).closest ('tr').remove ();
});

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.