Question

我正在谈论的两件事是一个文本字段和一个字符串，表示您需要输入的HTML才能显示该文本字段。有一个按钮可以显示这两件事。每次单击此按钮，都会出现另一对相同的按钮。

但是，每次生成一个新对时，我还会在文本字段旁边生成一个按钮，该按钮在被单击时应该删除文本字段和使用它创建的字符串。那么，我该如何做到这一点？

我可以编程＆＃34;当点击类x1的按钮时，删除文本字段和字符串，它们也有类x1＆＃34;然后＆＃34;当点击类x2的按钮时，删除文本字段和字符串，它们也有类x2＆＃34;，依此类推，但我的意思是除此之外的解决方案。

以下是文本字段/ HTML对的创建内容：

$(document).ready(function() {
$('#textField').click(function() {
$('#codeBox').append('<div id="divText'+visText+'"><input type="text" class="textfield" maxlength="0" id="visText'+visText+'"><input type="button" value="O" id="o"> <input type="button" value="?" id="que"> <input type="button" value="X" id="closeX"><div id="textCode" class="codeDisplay"><div class="textCode">&lt;div&gt;&lt;input&nbsp;type="text"&nbsp;class="textfield"&nbsp;id="text'+textClicked+'"&lt;/div&gt;&lt;br&gt;</div></div>');

$('#codeBox2').append('&lt;div&gt;&lt;input&nbsp;type="text"&nbsp;class="textfield"&nbsp;id="text'+textClicked+'"&lt;/div&gt;&lt;br&gt;')

Answer 1

您可以使用parent()来执行此操作

假设您在点击“添加”按钮

时添加这样的内容

<div>
        <div></div>
        <button class="remove">remove</button>
</div>

JS删除

$(document).on("click", ".remove", function(){
    $(this).parent().remove();
});

单击“删除”时，它将找到其父项并将其删除。

JS Demo

Answer 2

如果动态创建元素，则必须从创建它们的代码中引用它们。创建按钮时，向其添加一个click侦听器，通过闭包使用这些引用：

var text = document.createTextNode("some text");
var input = document.createElement("input");
var button = document.createElement("button");
button.addEventListener("click", function() {
  text.parentElement.removeChild(text);
  input.parentElement.removeChild(input);
  button.parentElement.removeChild(button);
});

Answer 3

查看jquery的各种树遍历方法：http://api.jquery.com/category/traversing/tree-traversal，可以帮助您在单击其中一个删除按钮时删除正确的元素。

如何在不知道ID或类值的情况下单击按钮并将其删除？

3 个答案: