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（）来自Array的项目，这对我来说也不起作用。我觉得我错过了一大步。如何获取删除按钮功能以识别我想要删除的按钮？

Answer 1

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

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

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

这link用于工作小提琴

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

1 个答案: