Delete row using jquery by pressing button

Question

I am writing a code which adds rows dynamically into a cart. Their is delete button in front of every row to delete that row. When the user press button the parent of that button should be grabbed and then implement remove() method to remove that row. But this way its not working for me.. Can anybody tell me where i am doing wrong? Following is my code

      <div class="container" id="dynamic">
                 <div class="row " id="main-row">
                   <div class="col-sm-1  " id="serial">1</div>
                    <div class="col-sm-2  ">
                    <select class="container-fluid">
                        <option value="1">Computer</option>
                        <option value="2">Mobile</option>
                        <option value="3">LCD</option>
                        <option value="4">Keyboard</option>
                        <option value="5">Mouse</option>
                    </select>
                </div>
         <div class="col-sm-2 "><input class="length" type="number" min="1"          name="name" value="" /></div>
          <div class="col-sm-2 "><input class="length" type="text" name="text"      value="" min="1" /></div>
        <div class="col-sm-2"><input class="length" type="text" min="1"/></div>
                <button class="btn-primary col-sm-1 del ">Delete</button>
             </div>

          </div>
          <button class="btn btn-primary" id="button1">Add Row</button>
        </section>

Here is my jquery code.

 //code for adding rows dynamically
 var counter = 1;
$(function () {

$("#button1").click(function () {
    counter++;
    $('#dynamic').append($("#main-row").clone().attr("id",counter-1));
    $("#serial").text(counter);

     });
 });
   //code for deleting row
  $('.del').click(function () {
    $(this).parent().remove();
   });

Please somebody answer me as i am stuck here at this point. I have tried couple of different things but nothing is working for me. — Ahmad
– Ahmad, Commented Mar 13, 2017 at 18:29

Rick Hitchcock · Accepted Answer · 2017-03-13 18:31:12Z

1

Since you're adding the rows dynamically, you'll need to use a delegated event handler.

Also use this instead of ".del" to avoid deleting all the rows.

$(document).on('click', '.del', function () {
  $(this).parent().remove();
 });

Otherwise, the new .del objects will not get the the click event.

edited Mar 13, 2017 at 18:31

answered Mar 13, 2017 at 18:04

Rick Hitchcock

35.7k5 gold badges51 silver badges83 bronze badges

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

7 Comments

Ahmad Over a year ago

The button is not working. even if i changed .del to this.. There is no error on console as well

Ahmad Over a year ago

Nothing happen by pressing button. It don't delete the row

Rick Hitchcock Over a year ago

Does it delete the row in my Snippet? If so, we'll need to see more of your code.

Ahmad Over a year ago

Yes it is deleting in your snippet

Ahmad Over a year ago

please see the updated question. I have added the code of dynamically adding row. I think that might be one which is causing delete button not to work.

|

Collectives™ on Stack Overflow

Delete row using jquery by pressing button

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related