Nothing happening on clicking on close button in newly inserted variable- block

Question

inserAfter is working fine but I also want to perform remove. On clicking the button with closequest id, nothing happening even alert-message not coming.

 //for adding ques ans and comment var qBlock = '<div class="newqandaBlock"><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-question"></i></span><input type="text" class="form-control" placeholder="Question Asked "><button type="button" id="closequest" class="btn btn-purple" style="position: absolute;top: 3px;"><span> <i class="fa fa-close"></i></span>close</button></div> <div class="input-group margin-bottom-20"> <span class="input-group-addon purple"><i class="fa fa-reply"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea> </div><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-comments"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea> </div></div>'; $("#addQuestion").on("click", function() { $(qBlock).insertAfter(".qandaBlock"); }); $(document).ready(function() { $("#closequest").on("click", function() { alert("ok"); $('qblock').remove(".newqandaBlock"); }); }); < /script> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-12 col-sm-12">` <form id="resetblock" name="resetblock"> <div class="qandaBlock"> <div class="input-group margin-bottom-20"> <span class="input-group-addon purple"><i class="fa fa-question"></i></span> <input type="text" class="form-control" placeholder="Question Asked "> </div> <div class="input-group margin-bottom-20"> <span class="input-group-addon purple"><i class="fa fa-reply"></i></span> <textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea> </div> <div class="input-group margin-bottom-20"> <span class="input-group-addon purple"><i class="fa fa-comments"></i></span> <textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea> </div> </div> <button type="button" class="btn btn-default" id="addcomment" onclick="resetform()">Reset</button>&nbsp; <button type="button" class="btn btn-purple" id="addQuestion"> <i class="fa fa-plus-square-o"></i>&nbsp;Add Another Question </button> </div> </form> </div> 

Answer 1

You should delegate the event handler as shown below, so that your event handler works with dynamically added elements.

Other than that, don't use id in dynamically injected templates - use class names instead, otherwise it'll invalidate your HTML. Finally, you should keep a reference to the added block:

 //for adding ques ans and comment var qBlock = '<div class="newqandaBlock"><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-question"></i></span><input type="text" class="form-control" placeholder="Question Asked "><button type="button" class="btn btn-purple closequest" style="position: absolute;top: 3px;"><span> <i class="fa fa-close"></i></span>close</button></div> <div class="input-group margin-bottom-20"> <span class="input-group-addon purple"><i class="fa fa-reply"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea> </div><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-comments"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea> </div></div>'; $(document).ready(function() { var latestBlock; $("#addQuestion").on("click", function() { latestBlock = $(qBlock).insertAfter(".qandaBlock"); }); $(document).on("click", ".closequest", function() { alert("ok"); latestBlock.remove(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-12 col-sm-12">` <form id="resetblock" name="resetblock"> <div class="qandaBlock"> <div class="input-group margin-bottom-20"> <span class="input-group-addon purple"><i class="fa fa-question"></i></span> <input type="text" class="form-control" placeholder="Question Asked "> </div> <div class="input-group margin-bottom-20"> <span class="input-group-addon purple"><i class="fa fa-reply"></i></span> <textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea> </div> <div class="input-group margin-bottom-20"> <span class="input-group-addon purple"><i class="fa fa-comments"></i></span> <textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea> </div> </div> <button type="button" class="btn btn-default" id="addcomment" onclick="resetform()">Reset</button>&nbsp; <button type="button" class="btn btn-purple" id="addQuestion"> <i class="fa fa-plus-square-o"></i>&nbsp;Add Another Question </button> </div> </form> </div> 

Answer 2

Issue here is that dynamic added elements have to be told to jQuery that they exists. Earlier we were using live but now jQuery supports on . On is delegation. It says look for all events that occur on this element or it's child ie you can scope it to specific child. So pick the closest parent that exists and not body or document.

Also id's have to be unique so you cannot use id's in this case instead use class.

Put the script tag just before closing body

 var qBlock='<div class="newqandaBlock"><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-question"></i></span><input type="text" class="form-control" placeholder="Question Asked "><button type="button" id="" class="btn btn-purple closequest" style=""><span> <i class="fa fa-close"></i></span>close</button></div> <div class="input-group margin-bottom-20"> <span class="input-group-addon purple"><i class="fa fa-reply"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea> </div><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-comments"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea> </div></div>'; $("#addQuestion").on("click",function(){ $(qBlock).insertAfter(".qandaBlock"); }); $("#resetblock").on("click",'.closequest', function(){ alert("ok"); $(this).closest(".newqandaBlock").remove(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="col-md-12 col-sm-12">` <form id="resetblock" name="resetblock" > <div class="qandaBlock"> <div class="input-group margin-bottom-20"> <span class="input-group-addon purple"><i class="fa fa-question"></i></span> <input type="text" class="form-control" placeholder="Question Asked "> </div> <div class="input-group margin-bottom-20"> <span class="input-group-addon purple"><i class="fa fa-reply"></i></span> <textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea> </div> <div class="input-group margin-bottom-20"> <span class="input-group-addon purple"><i class="fa fa-comments"></i></span> <textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea> </div> </div> <button type="button" class="btn btn-default" id="addcomment" onclick="resetform()">Reset</button>&nbsp; <button type="button" class="btn btn-purple" id="addQuestion"> <i class="fa fa-plus-square-o"></i>&nbsp;Add Another Question </button> </div> </form> </div> 

Answer 3

$('qblock') is not valid a valid HTML element, this won't work, don't forget '.' or '#'. Use something like $('.newqandaBlock').remove(), to remove the class.