动态创建删除按钮

Question

我正在动态地尝试创建一个具有内容和删除按钮的div，只要点击“createaction”按钮。

无论何时删除按钮被点击，我都有一个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(); 
    } 
    }); 
}); 

Answer 1

您可以定义一个计数器：

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

而且通过追加计数器ID的静态部分作ID。你还需要增加它使得它独特的未来元素：

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

对于附加click事件，您需要使用事件代表团附加事件动态添加的DOM。你可以使用属性开始选择指定的所有删除ID为开头的元素删除：

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

Answer 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" class="actionsDiv"><div class="pull-right box-tools"><button type="button" class="btn btn-default btn-sm 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(''); 
 
}); 
 

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

Answer 3

我建议是什么，而不是增加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>