Remove button is not working when dynamic add fields

Question

Here you can check the #appenddiv added dynamically and close button all adding dynamically, but when I click on close button its not working inside the dynamically call div. How to resolve this issue? I need to add dynamic div and I can remove it also.

function LoadStart() {
    $('#insertnewqstnbtn').click(function () {
        $('#newqstndiv').append('<div id="appenddiv" class="ms-create-new-form"><h2 class= "ms-font-xl"> Add New Question <span><a href="javascript:;" id="closequestion">Close<a/></span></h2><div class="multichoice-question-btn"><div class="item"><span>Multiple Choice?</span><input type = "checkbox" id = "toggle_addqstn" name = "" value = "" checked><div class= "toggle"><label for="toggle_addqstn"><i></i></label></div></div></div><div class="ms-input-field-div"><input id="questiontxt" type="text" placeholder="Enter question text here" class="ms-title-field" /></div><div class="ms-form-first-group form-for-ans"><div class="ms-ans-text"><p>Answer</p></div><div class="ms-correct-text"><p>Correct?</p></div></div><div class="border-bottom-line-ans"></div><div class="ms-form-second-ground question-with-ans"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option 1 text" id="option1" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="checkbox" id="checkboxn1" /><label for="checkboxn1"></label></div></div></div><div class="ms-form-second-ground question-with-ans"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option 2 text" id="option2" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="checkbox" id="checkboxn2" /><label for="checkboxn2"></label></div></div></div><div class="ms-form-second-ground question-with-ans"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option 3 text" id="option3" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="checkbox" id="checkboxn3" /><label for="checkboxn3"></label></div></div></div><div class="ms-form-second-ground question-with-ans"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option 4 text" id="option4" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="checkbox" id="checkboxn4" /><label for="checkboxn4"></label></div></div></div><div class="ms-pagin-div" id="rqdoptionsdiv"><div class="ms-pagin-text"><p>Required correct answer</p></div><div class="ms-pagin-num" id="correctOptNum"><span>2</span><span>3</span><span class="active">4</span></div></div><button id="addnewqstnCancelbtn" class="newcoursecancelbtn">Cancel</button><button id="addnewqstnbtn" class="ms-cm-button add-detail-btn" style="width:40%;">Create</button><label id="chkpointErrMsg"></label><div class="border-bottom-line mb-bottom-15"></div></div>');
    });
    $('#closequestion').on('click', function () {
        $('#appenddiv').remove();
    });
}

LoadStart();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="newqstndiv"></div>

I tried but not working on button inside the dynamic div.But working on button outside the dynamic div. I need the button working inside the dynamic div — rajan chopra, Dec 12 '19 at 10:10
You cannot create multiple tags with the same Id. You should also add event listeners inside function, where you append html. — Michał Szymański, Dec 12 '19 at 10:26
You need to use event delegation. See links provided in the comments. — freedomn-m, Dec 12 '19 at 10:26
`$('#closequestion').on` will add an event handler to the *first* `id=closequestion` - stop using the same ID for all new buttons (it was hidden in that mass of html). — freedomn-m, Dec 12 '19 at 10:30
https://jsfiddle.net/7nc1o3xt/3/ it's work. Duplicate of 1st comment. — 4b0, Dec 12 '19 at 10:32

Michał Szymański · Answer 1 · 2019-12-12T11:03:59.907

Basic example:

var i = 0;

$('#add').on('click', function () {

var removeButton = $('<button>Remove</button>')
    .attr('value', i);

var span = $('<span></span>')
    .text('Some text ' + i);

var div = $('<div></div>')
    .attr('id', 'section' + i)
    .append(span)
    .append(removeButton);

$('#list').append(div);

removeButton.on('click', function () {
    div.remove();
});

// Or like this:

// $('button[value="' + i +'"]').on('click', function(e){
//     $('#section' + $(e.target).attr('value')).remove();
// });

i++;
});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

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

</html>

Remember to generate elements with different ids as they have to be unique per one page.

Remove button is not working when dynamic add fields

1 Answers1