动态创建删除按钮

时间:2017-01-03 09:40:20

标签: javascript jquery html dom

我动态尝试创建一个包含内容和删除按钮的div,只要这个' createaction'单击按钮。

每当单击删除按钮时,我都有一个onclick功能。但我的代码在这里不起作用,我认为这是因为删除按钮ID是相同的。

我可以通过什么方式使这些按钮彼此独特?

ndk-gdb --verbose

3 个答案:

答案 0 :(得分:2)

我建议进行两项改进,首先不要在您创建的HTML上使用id属性,因为您可以很容易地得到影响JS逻辑的重复项 - 正如您所见。请改用类。

其次,对删除按钮使用单个委托事件处理程序,而不是在每次单击“创建”按钮时附加新的事件处理程序。

$("#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>

答案 1 :(得分:2)

我建议的是,您可以将id的值添加为html elements属性,而不是将id添加到可能重复的动态生成的class中,而不是@Satpal在评论中说,使用Event Delegation,并将点击事件保留在document上,以找到包含delete类的相关元素,并使用closest和找到div.actionsDiv并将其删除。以下是适合您的工作片段。

$("#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>

答案 2 :(得分:0)

您可以定义一个计数器:

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

通过将该计数器附加到id的静态部分来创建id。您还需要增加它以使其在未来元素中独一无二:

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

对于附加click事件,您需要使用事件委派将事件附加到动态添加的DOM。您可以使用属性start with selector来定位以id delete开头的所有删除元素:

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