How to remove an appended div on a button click?

Question

I have seen lot of example here.But here am facing another problem that the event is not even detected (button in appended div). Am adding some text-box and a button using append method on a button click which works perfectly.but when I am trying to remove the same div using a button click its not working.

 $(document).ready(function() { $("#add").click(function() { $("#mydiv").append($("<div class='row' id='row'> <div class='col-md-4'><div class='form-group'><div class='col-md-10'><input type='text' name='vname[]'class='form-control' placeholder='Vazhipad Name' /></div></div></div><div class='col-md-4'><div class='form-group'><div class='col-md-10'><input type='text' name='vprize[]'class='form-control' placeholder='Vazhipad Prize' /> </div></div> </div><div class='form-group'><div class='col-md-10'><button type='button' id='btnRemove' class='btn btn-primary btnRemove'>-</button></div></div></div></div>")) }); $('body').on('click', '.btnRemove', function() { $(this).parent('div.row').remove() }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="mydiv" id="mydiv"> <div class="form-group"> <div class="col-md-10"> <select name="templeid" id="tid1" class="form-control"> <option>-Select Temple-</option> <option value="temp_id">A templename</option> </select> </div> </div> <div class="row"> <div class="col-md-4"> <div class="form-group"> <div class="col-md-10"> <input type="text" name="vname[]" class="form-control" placeholder="Vazhipad Name" /> </div> </div> </div> <div class="col-md-4"> <div class="form-group"> <div class="col-md-10"> <input type="text" name="vprize[]" class="form-control" placeholder="Vazhipad Prize" /> </div> </div> </div> <div class="col-md-4"> <div class="form-group"> <div class="col-md-10"> <button type="button" id="add" class="btn btn-primary">+</button> </div> </div> </div> </div> </div>

Answer 1

use closest() instead of parent() , as you want to traverse to up-most parent, not the immediate one.

Check below working snippet:

 $(document).ready(function () { $("#add").click(function () { $("#mydiv").append($("<div class='row' id='row'> <div class='col-md-4'><div class='form-group'><div class='col-md-10'><input type='text' name='vname[]'class='form-control' placeholder='Vazhipad Name' /></div></div></div><div class='col-md-4'><div class='form-group'><div class='col-md-10'><input type='text' name='vprize[]'class='form-control' placeholder='Vazhipad Prize' /> </div></div> </div><div class='form-group'><div class='col-md-10'><button type='button' id='btnRemove' class='btn btn-primary btnRemove'>-</button></div></div></div></div>")) }); $('body').on('click', '.btnRemove', function () { $(this).closest('div.row').remove() }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="add">Add</button> <div id="mydiv"></div>

Note:- Check below thread for better understanding of parent() , parents() and closest()

Difference between jQuery parent(), parents() and closest() functions

Answer 2

.parents()

The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree. Also, $( "html" ).parent() method returns a set containing document whereas $( "html" ).parents() returns an empty set.

Since the clicked element ( .btnRemove ) is not the direct children of ( div.row ) instead of .parent() use .parents() :

 $(document).ready(function () { $("#add").click(function () { $("#mydiv").append($("<div class='row' id='row'> <div class='col-md-4'><div class='form-group'><div class='col-md-10'><input type='text' name='vname[]'class='form-control' placeholder='Vazhipad Name' /></div></div></div><div class='col-md-4'><div class='form-group'><div class='col-md-10'><input type='text' name='vprize[]'class='form-control' placeholder='Vazhipad Prize' /> </div></div> </div><div class='form-group'><div class='col-md-10'><button type='button' id='btnRemove' class='btn btn-primary btnRemove'>-</button></div></div></div></div>")); }); $('body').on('click', '.btnRemove', function () { $(this).parents('div.row').remove() }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="add">Add</button> <div id="mydiv"></div>

Answer 3

You can use .parents() or closest() to achieve it.

 $("#add").click(function () { $("#mydiv").append($("<div class='row' id='row'> <div class='col-md-4'><div class='form-group'><div class='col-md-10'><input type='text' name='vname[]'class='form-control' placeholder='Vazhipad Name' /></div></div></div><div class='col-md-4'><div class='form-group'><div class='col-md-10'><input type='text' name='vprize[]'class='form-control' placeholder='Vazhipad Prize' /> </div></div> </div><div class='form-group'><div class='col-md-10'><button type='button' id='btnRemove' class='btn btn-primary btnRemove'>-</button></div></div></div></div>")) }); $('body').on('click', '.btnRemove', function () { $(this).parents('div.row').remove() });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="mydiv" id="mydiv"> <div class="form-group"> <div class="col-md-10"> <select name="templeid" id="tid1" class="form-control"> <option >-Select Temple-</option> @foreach (var a in ViewBag.namelist) { <option value="@a.temp_id">@a.templename</option> } </select> </div> </div> <div class="row"> <div class="col-md-4"> <div class="form-group"> <div class="col-md-10"> <input type="text" name="vname[]"class="form-control" placeholder="Vazhipad Name" /> </div> </div> </div> <div class="col-md-4"> <div class="form-group"> <div class="col-md-10"> <input type="text" name="vprize[]"class="form-control" placeholder="Vazhipad Prize" /> </div> </div> </div> <div class="col-md-4"> <div class="form-group"> <div class="col-md-10"> <button type="button" id="add" class="btn btn-primary">+</button> </div> </div> </div> </div> </div>