Javascript 动态创建删除按钮

我正在动态地尝试创建一个div，每当单击这个“createaction”按钮时，它都有一个content和delete按钮

每当单击删除按钮时，我都有一个onclick函数。但是我这里的代码不起作用，我认为这是因为删除按钮id是相同的

我怎样才能使这些按钮彼此独特

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

$（“#createAction”）。单击（函数（）{
var targetDate=$（“#targetDate”）.val（）；
var newAction=”
删除
目标日期：“+targetDate+”
";
$（“#行动计划信息”）。追加（新行动）；
美元（“#targetDate”）.val（“”）；
$（“#删除”）。在（“单击”，函数（）{
var confirmation=confirm（'您确定要删除此行动计划吗？'）；
如果（确认==真）{
$（this.parent（）.parent（）.remove（）；
}
});
});

您可以定义计数器：

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
});

---

我建议两个改进，首先不要在你创建的HTML上使用

id

属性，因为你很容易得到重复的属性，这会影响你的JS逻辑——正如你所看到的。改用类

其次，为delete按钮使用单个委托事件处理程序，而不是在每次单击create按钮时附加一个新的委托事件处理程序

$（“#createAction”）。单击（函数（）{
var targetDate=$（“#targetDate”）.val（）；
var followUpDate=$（“#followUpDate”）.val（）；
var action=$（“#actionplan”）.val（）；
var newAction='X目标日期：'+targetDate+'后续日期：'+followUpDate+action+'；
$（“#行动计划信息”）。追加（新行动）；
美元（“#targetDate”）.val（“”）；
$（“#followUpDate”）.val（“”）；
$（“#行动计划”）.val（“”）；
});
$（“#actionPlanInfo”）。在（“单击”，“删除”，函数（）上）{
var confirmation=confirm（'您确定要删除此行动计划吗？'）；
如果（确认）{
$（this）.closest（'.actionsDiv'）.remove（）；
}
});

创造
我的建议是，不要将
id
添加到动态生成的
html元素中，这些元素可能是重复的，您可以将
id
的值添加为
class
属性，然后如@Satpal在其评论中所说，使用
事件委托
，并在
文档
上保留单击事件，以查找具有类的相关元素
删除
，并使用
最近的
，查找
div.actionsDiv
，然后将其删除。下面是为您准备的工作片段


$（“#createAction”）。单击（函数（）{
var targetDate=“22-10-2016”/$（“#targetDate”）.val（）；
var followUpDate=“26-10-2016”/$（“#followUpDate”）.val（）；
var action=“测试计划”/$（“行动计划”）.val（）；
var newAction=“删除目标日期：“+targetDate+”后续日期：“+followUpDate+action+”；
$（“#行动计划信息”）。追加（新行动）；
美元（“#targetDate”）.val（“”）；
$（“#followUpDate”）.val（“”）；
$（“#行动计划”）.val（“”）；
});
$（文档）。在（“单击“，”.delete“，函数（）上）{
var confirmation=confirm（'您确定要删除此行动计划吗？'）；
如果（确认==真）{
$（this）.closest（“.actionsDiv”）.remove（）；
}
});

创建
如果将代码粘贴到此处，而不是添加相同的快照，则会很有帮助：）你能用小提琴分享你的代码吗。net@GuruprasadRao刚刚添加了代码。remove（）函数在这里不起作用？@HuanfaChen你说得对！近18个月来第一个注意到的人：）我已经解决了这个问题-我在附加的元素中添加了两个
class
属性