0

I have an HTML table in which rows can be added dynamically by button click(Also done with jQuery). What I want now is,I need to have a button by the side of each row. Pressing it would delete that particular row.

The table is as follows. 

<tr class="item-row">
         <td class="item-name">
          <div class="delete-wpr"><textarea></textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>

           <td><input type="text" class="slno"/></td>           

          <td><input type="text" class="cost"/></td>
          <td><input type="text" class="qty"/></td>
          <td><span class="price"></span></td>
      </tr>

The Jquery to add more rows is as follows.

 $("#addrow").click(function(){
$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><input type="text" class="slno"/><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td><input type="text" class="slno"/></td><td><input type="text" class="cost"/></td><td><input type="text" class="qty"/></td><td><span class="price"></span></td></tr> ');

The function I am using is this. But it's not working.

$(".delete").on('click',function(){
$(this).parents('.item-row').remove();
update_total();
if ($(".delete").length < 2) $(".delete").hide();
  });

So how do I do this?

Improve this question
0

3 Answers 3

Reset to default
2

As the rows are dynamic you need a delegated event handler, attached to a non-changing ancestor of the elements. document is the best default if nothing is closer/convenient:

$(document).on('click', ".delete", function(){
    $(this).closest('.item-row').remove();
    update_total();
    if ($(".delete").length < 2) $(".delete").hide();
});

In your example the table element would be a good target.

e.g.

$('#items').on('click', ".delete", function(){
    $(this).closest('.item-row').remove();
    update_total();
    if ($(".delete").length < 2) $(".delete").hide();
});

Delegated events work by applying the jQuery selector at event time, not when the event was registered. This means they can exist later.

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

1 Comment

The table ID is "items". Is that what is required?
1

First, put the table label on the add, then try this :

            $('table').on('click', ".delete", function() {
              $(this).closest('tr').remove(); // more simple
            });
Improve this answer

1 Comment

You may need to reword "put the table label on the add" as I can't understand what you meant. Also, delegated events should target a single specific element, or document as the default. Otherwise you can wind up with multiple delegated handlers, which is wasteful/pointless. :)
0 
     <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>

    $(document).ready(function () {

        $('#btadd').click(function () {

            szTr='<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea></textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td><input type="text" class="slno"/></td><td><input type="text" class="cost"/></td><td><input type="text" class="qty"/></td><td><span class="price"></span></td></tr>';

            $('#tbl_test tbody').append(szTr)
        });

        $('table').on('click', ".delete", function () {
            $(this).closest('tr.item-row').remove();

        });
    });
</script>
</head>
<body>
    <button value="Add Row" id="btadd">Add Row</button>
      <table id="tbl_test">
          <tbody>
            <tr class="item-row">
         <td class="item-name">
          <div class="delete-wpr"><textarea></textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>

           <td><input type="text" class="slno"/></td>         

          <td><input type="text" class="cost"/></td>
          <td><input type="text" class="qty"/></td>
          <td><span class="price"></span></td>
        </tr>   

               <tr class="item-row">
         <td class="item-name">
          <div class="delete-wpr"><textarea></textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>

           <td><input type="text" class="slno"/></td>           

          <td><input type="text" class="cost"/></td>
          <td><input type="text" class="qty"/></td>
          <td><span class="price"></span></td>
        </tr>  
              </tbody>
      </table>


</body>
</html>
Improve this answer

1 Comment

Better - downvote removed. With delegated event handlers, you should either target a single specific element, or document as the default. If for example there are multiples tables in a page your example will be attaching multiple delegated handlers when only one is needed.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.