Adding and removing div in jquery not working

Question

I am trying to add question box as shown below, the first remove button works fine. But when I dynamically add the div and then try to remove it does not work. I tried to alert on deleting question it still does not work. Can anyone help me on this ?

JS

<script type="text/javascript">
jQuery(document).ready(function(e) {

    jQuery( '#add-question' ).on('click', function() {
        var lastId = jQuery('.del-question').last().data('id');
        var nextId = lastId+1;
        var questionBox = '<div class="question-box box-1"><h2>Question 1</h2><input type="text" name="ques_title" class="ques_title" placeholder="Enter question title" value=""><div class="form-group"><a class="del-question button" href="#" data-id="1">Remove</a></div></div>';
        jQuery('.question-box').after(questionBox);
        return false;
    });

    jQuery( '#quiz-box .del-question' ).on('click', function() {
        var id = jQuery(this).data('id');
        jQuery('.box-'+id).remove();
        return false;
    });
});
</script>

HTML

<div id="quiz-box">
  <div class="question-box box-1">
   <h2>Question 1</h2>
   <input type="text" name="ques_title" class="ques_title" placeholder="Enter question title" value="">
   <div class="form-group">
    <a class="del-question button" href="#" data-id="1">Remove</a>
   </div>
 </div>
 <div class="form-group">
  <a id="add-question" class="button" href="#">Add</a>
 </div>

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Taplar, Aug 22 '18 at 15:29
Side Note: the first parameter that is passed into the `ready` callback is `jQuery`, so naming it `e` is slightly misleading as that is usually associated with an event object, which it is not. — Taplar, Aug 22 '18 at 15:30
Ok, yes I am referring to the post you have mentioned @Taplar :) — topper1309, Aug 22 '18 at 15:38
I have made changes to the code according to the post, but still it does not work @Taplar — topper1309, Aug 22 '18 at 15:41
Please refer to the part of the duplicate that talks about a delegate event handler/binding. That is what you are after. You can also find reference to them @ http://learn.jquery.com/events/event-delegation/ — Taplar, Aug 22 '18 at 15:43

score 1 · Accepted Answer · answered Aug 22 '18 at 16:04

I made a Snippet for you.

The problem was that you can't bind events to dynamic objects. $(document).on is needed.

Plus, I used clone() and added a "renameQuestions" function, just to give you a better way to approach what you want.

$(document).ready(function(e) {
    function addQuestion(){
        var question = $('#question-template').clone();
        question.css("display","block").removeAttr('id');
        $('#questions').append(question);
    }

    function renameQuestions(){
        $('.question-box').each(function(i,v){
            $(this).find('.question_id').html(i);
        });
    }

    $('#add-question').on('click', function() {
        addQuestion();
        renameQuestions();
    });

    $(document).on('click','.del-question', function()
    {
        $(this).closest('.question-box').remove();
        renameQuestions();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="questions">
  <div class="question-box" id="question-template" style="display:none;">
    <h2>Question <span class="question_id"></span></h2>
    <input type="text" name="ques_title" class="ques_title" placeholder="Enter question title" value="">
    <div class="form-group">
      <a class="del-question button" href="#">Remove</a>
    </div>
  </div>
</div>

<div class="form-group" style="margin-top:20px;">
  <a id="add-question" class="button" href="#">Add</a>
</div>

Wow! Thank you so much. This was an incredible and efficient way of doing it. I really learned a lot about this now — topper1309, Aug 22 '18 at 16:28
I have a simple problem, when I add dynamically the screen goes to the top and the url has '#' in it. I want it to say there only when I add. Is it possible ? — topper1309, Aug 22 '18 at 16:42
Can you also help me on this ? https://wordpress.stackexchange.com/questions/312193/how-to-store-multiple-custom-meta-box — topper1309, Aug 22 '18 at 17:45

Adding and removing div in jquery not working

1 Answers1