Javascript 获取按钮的id以在单击减号按钮时删除输入字段

我有一个默认为2选项的选项字段。我有一个按钮“添加更多选项”，这将动态添加一个输入字段（包含要删除的减号按钮）

我想在用户单击减号按钮时删除特定的输入字段

<div class="col-sm-4 col-sm-offset-4">
    <form class="form-horizontal" action="index" method="post">     
        <div id="optionsList"class="form-group">
            <label for="options">Options</label>
            <input type="text" class="form-control" id="option1" placeholder="M S Dhoni">
            <input type="text" class="form-control" id="option2" placeholder="Virat Kohli">
        </div>
        <div class="form-group">
            <button type="button" class="btn btn-lg btn-default" id="moreOptions">Add More Options</button>
        </div>          
    </form>
</div>

---

请建议。任何其他方法也可以。生成按钮时添加onclick处理程序，如下所示：

$("#removeBtn" + optionNo + "").click(function()
{
 $("#inputField" + optionNo + "").remove();
});

---

生成按钮时添加onclick处理程序，如下所示：

$("#removeBtn" + optionNo + "").click(function()
{
 $("#inputField" + optionNo + "").remove();
});

---

由于动态添加了“新建”按钮，因此需要将单击事件委托给文档：

$(document).on('click', ".input-group button", function(e) {
    $(this).closest('.input-group').remove();
});

此部分：“.input group button”表示：在输入组中侦听与按钮元素相关的单击事件

用于获取要删除的父div

片段：

$（文档）.ready（函数（）{
var optionNo=2；
$（“#更多选项”）。在（'click'，函数（e）{
选项编号=选项编号+1；
$（“#选项列表”）。附加
('');
});
//在这里，我想编写代码来删除该输入字段
$（文档）。在（'单击'，“.input group button”上，函数（e）{
$（this）.closest（'.input group'）.remove（）；
});
});

选择权
添加更多选项
提交
由于您在运行中添加了新按钮，因此需要将单击事件委托给文档：

$(document).on('click', ".input-group button", function(e) {
    $(this).closest('.input-group').remove();
});

此部分：“.input group button”表示：在输入组中侦听与按钮元素相关的单击事件

用于获取要删除的父div

片段：


$（文档）.ready（函数（）{
var optionNo=2；
$（“#更多选项”）。在（'click'，函数（e）{
选项编号=选项编号+1；
$（“#选项列表”）。附加
('');
});
//在这里，我想编写代码来删除该输入字段
$（文档）。在（'单击'，“.input group button”上，函数（e）{
$（this）.closest（'.input group'）.remove（）；
});
});

选择权
添加更多选项
提交
使用类，而不用担心ID的增加。这种方法有时过于复杂，难以管理，根本不需要

简化的附加html和新类
删除btn
而不是按钮上的id:

 $("#optionsList").append
        ('<div class="input-group"><input><button class="btn btn-danger remove-btn" type="button"></button></div>');

使用类而不是担心ID的增加。这种方法有时过于复杂，难以管理，根本不需要

简化的附加html和新类
删除btn
而不是按钮上的id:

 $("#optionsList").append
        ('<div class="input-group"><input><button class="btn btn-danger remove-btn" type="button"></button></div>');

首先，如果您不打算更改动态创建的元素的值并最终得到具有相同id的多个元素，请不要在其中使用
id
，而应使用类。即

class="removeBtn'

接下来，对于动态创建的元素，使用事件冒泡来附加事件

$("body").on("click", ".removeBtn", function(){
  $(this).closest(".input-group").remove();
});

首先，如果您不打算更改动态创建的元素的值并最终得到具有相同id的多个元素，请不要在其中使用
id
，而应使用类。即

class="removeBtn'

接下来，对于动态创建的元素，使用事件冒泡来附加事件

$("body").on("click", ".removeBtn", function(){
  $(this).closest(".input-group").remove();
});

请尝试使用下面的代码。希望能有帮助


var计数器=1；
$（文档）。在（'单击'，'按钮#更多选项'，函数（）上）{
$（“#选项列表”）。附加
('');
计数器++；
});
$（document）.on（'单击'，'按钮.btn减号'，函数（）{
$（this）.parents（'div.input-group'）.remove（）；
});

选择权
添加更多选项
尝试以下代码。希望能有帮助


var计数器=1；
$（文档）。在（'单击'，'按钮#更多选项'，函数（）上）{
$（“#选项列表”）。附加
('');
计数器++；
});
$（document）.on（'单击'，'按钮.btn减号'，函数（）{
$（this）.parents（'div.input-group'）.remove（）；
});

选择权
添加更多选项
您应该让HTML尽可能短，以满足问题的需要。您应该让HTML尽可能短，以满足问题的需要。非常感谢。解释得很好。这也奏效了。：）非常感谢你。解释得很好。这也奏效了。：）