dynamically create delete buttons

Question

I'm dynamically trying to create a div which has a content and delete button whenever this 'createaction' button is clicked.

I have an onclick function whenever the delete button is clicked. but my code here does not work, and I think it is because the delete button id is the same.

In what way can i make these buttons unique from each other?

$("#createAction").click(function() {
  var targetDate = $("#targetDate").val();
  var newAction = "<div id='actionsDiv'>
                     <div>
                        <button type='button' id='delete'> delete</button>
                     </div>
                     <label>Target Date:</label>" + targetDate + "
                   </div>";
  $("#actionPlanInfo").append(newAction);

  $("#targetDate").val('');

  $("#delete").on("click", function() {
    var confirmation = confirm('Are you sure you want to delete this action plan/s?');
    if (confirmation == true) {
      $(this).parent().parent().remove();
    }
  });
});

Its helpful if you paste your code here instead of adding a snapshot of the same.. :) — Guruprasad J Rao, Jan 03 '17 at 09:41

Rory McCrossan · Answer 1 · 2018-06-08T15:29:23.467

I'd suggest two improvements, firstly don't use id attributes on the HTML you create as you can easily end up with duplicates which will affect your JS logic - as you've seen. Use classes instead.

Secondly, use a single delegated event handler for the delete button instead of attaching a new one on each click of the create button.

$("#createAction").click(function() {
    var targetDate = $("#targetDate").val();
    var followUpDate = $("#followUpDate").val();
    var action = $("#actionplan").val();

    var newAction = '<div class="box-header with-border actionsDiv"><div class="pull-right box-tools"><button type="button" class="btn btn-default btn-sm delete"><i class="fa fa-times">X</i></button></div><label>Target Date:</label>' + targetDate + '<label>Follow-up Date: </label>' + followUpDate + action + '</div>';
    $("#actionPlanInfo").append(newAction);

    $("#targetDate").val('');
    $("#followUpDate").val('');
    $("#actionplan").val('');
});

$("#actionPlanInfo").on("click", '.delete', function() {
    var confirmation = confirm('Are you sure you want to delete this action plan/s?');
    if (confirmation) {
        $(this).closest('.actionsDiv').remove();
    }
});

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

<!-- dummy values -->
<input id="targetDate" value="03/01/2017" />
<input id="followUpDate" value="10/01/2017" />
<input id="actionplan" value="foo" />

<div id="actionPlanInfo"></div>

@HuanfaChen you're right! The first person in almost 18 months to notice :) I've fixed the issue - I'd added two `class` attributes in to the appended element — Rory McCrossan, Jun 08 '18 at 15:29

score 2 · Answer 2 · answered Jan 03 '17 at 09:52

What I would suggest is, instead of adding id to dynamically generated html elements which could be repetitive, you can add value of id as class attribute and then as @Satpal said in his comments, make use of Event Delegation, and leave the click event on document to find the relevant element which has class delete and make use of closest and find div.actionsDiv and remove it. Below is the working snippet for you.

$("#createAction").click(function() {
  var targetDate = "22-10-2016";//$("#targetDate").val();
  var followUpDate = "26-10-2016";//$("#followUpDate").val();
  var action = "Test plan";//$("#actionplan").val();
  var newAction = "<div class='box-header with-border actionsDiv'><div class='pull-right box-tools'><button type='button' \n\
        class='btn btn-default btn-sm delete'> Delete<i class='fa fa-times'></i></button></div><label>Target Date:</label>" + targetDate + "<label>Follow-up Date: </label>" + followUpDate + action + "</div>";
  $("#actionPlanInfo").append(newAction);

  $("#targetDate").val('');
  $("#followUpDate").val('');
  $("#actionplan").val('');
});

$(document).on("click",".delete", function() {
    var confirmation = confirm('Are you sure you want to delete this action plan/s?');
    if (confirmation == true) {
      $(this).closest(".actionsDiv").remove();
    }
  });

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

<button id="createAction">Create</button>

score 0 · Answer 3 · answered Jan 03 '17 at 09:46

You can define a counter:

var newActionCount = 0;
$("#createAction").click(function() {
   //rest code
});

And make id by appending that counter to static part of id. you will also need to increment it for making it unique for future elements:

id='actionsDiv'"+(newActionCount ++)+".....
id='delete'"+(newActionCount ++)+".....

For attaching click event, You need to use event delegation for attaching event to dynamically added DOM. you can use attribute start with selector for targeting all delete elements that starts with id delete:

$('#actionPlanInfo').on('click','[id^=delete]',function(){
   //delete click handler
});

dynamically create delete buttons

3 Answers3