如何使用删除按钮删除jQuery中动态创建的按钮

Question

我希望有人能帮助我。

我在我的HTML表单中有两个按钮。提交和删除。 提交的用户输入被制作为一个按钮，当点击该按钮时，从AJAX调用中获取信息给API。 示例：用户在搜索字段中输入NEMO，并在HTML中动态创建一个名为NEMO的按钮，当用户单击NEMO按钮时，它将从API中提取nemo gif。我能够完美地完成所有这些工作。

HTML：

<form class="pixar-form" id="pixarSearch"> 
<div class="form-group"> 
<label for= "pixarInput" ></label> 
<input type="text" id="pixar-input"/> 
<input id="addPixar" type="button" value="Submit"/> 
<input id="removePixar" type="button" value="Delete"/> 
</div> 
</form> 
<div id = "pixarView"></div> 
<div id = "buttonView"></div> 

这是我使用生成我的按钮（只显示我认为是相关的代码，以帮助回答我的问题在底部，随着AJAX调用是相当冗长的代码， 。所以我没有在这里添加这种代码是FNE：

var pixars = ["WALL-E", "DORY", "SULLY] 

function renderButtons() { 
for (var i = 0; i < pixars.length; i++) { 
var a = $('<button class= "btn btn-primary">'); 
a.addClass("pixar"); 
a.attr("data-name", pixars[i]); 
a.text(pixars[i]); 
$("#buttonView").append(a); 
} 
} 

$("#addPixar").on("click", function(event) { 
var pixar = $("#pixar-input").val(); 
pixars.push(pixar); 
$("#pixar-input").val(" "); 
renderButtons(); 
} 
}); 

我的问题是 - 我无法删除按钮正常工作 这里是我的删除按钮的功能：

$("#removePixar").on("click", function() { 
var pixarRemove= $(this).attr("data-name"); 
pixarRemove.remove(); 
}); 

因此，例如： 我已经创建了NEMO，BUZZ，WODY ..的按钮，我想删除WODY，因为我拼写错了。 我点击WODY按钮并点击DELETE按钮，所有3个按钮将消失，而不仅仅是一个。

我不知道如何解决这个问题。我试过从数组中提取.splice（），这也不适用于我。我觉得我错过了一大步。 如何获得删除按钮功能，以识别我想要删除的按钮？

Answer 1

最简单的方法是将最后点击的按钮存储在某个变量中，然后删除该变量。

var deleteCandidate; 
... 
$("#buttonView").on("click", ".pixar", function() { 
    deleteCandidate = $(this); 
    ... 

$("#removePixar").on("click", function() { 
    deleteCandidate.remove(); 

这link是工作提琴