Question

我有一个默认为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>

这是脚本 -

  $(document).ready(function(){
      var optionNo = 2;
      $("#moreOptions").click(function(){
        optionNo = optionNo + 1;
        $("#optionsList").append
        ('<div class="input-group" id="inputField' + optionNo +'"><input type="text" class="form-control" placeholder="New option field" id="option' + optionNo +'"><i class="input-group-btn"><button class="btn btn-danger" type="button" id="removeBtn' + optionNo +'"><i class="glyphicon glyphicon-minus"></i></button></i></div>');
      });
      // here i want to write code to remove that input field      
    });

我试过了 -

$(".input-group").click(function(){
    const id = this.id;
    $("#id").remove();
  });

请建议。任何其他方式也可以。

Answer 1

使用类而不是担心增加ID。这种方法有时太难以管理，而且根本不需要它

使用新类remove-btn简化附加html而不是按钮上的id：

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

将来添加到dom的任何.remove-btn的委托事件监听器

$(document).on('click', '.remove-btn', function(){
   // "this" is current button event occurs on
   $(this).closest('.input-group').remove()
})

Answer 2

首先不要在动态创建的元素中使用id，如果你不打算更改它的值，最后使用相同ID的多个元素而不是使用类。即

class="removeBtn'

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

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

Answer 3

因为您需要动态添加新按钮，您需要将click事件委派给文档：

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

这部分：＆＃34; .input-group button＆＃34;表示：侦听与输入组内的按钮元素相关的点击事件

closest用于移除父div。

摘录：

＆＃13;

$(document).ready(function(){
  var optionNo = 2;
  $("#moreOptions").on('click', function(e) {
      optionNo = optionNo + 1;
      $("#optionsList").append
      ('<div class="input-group" id="inputField' + optionNo +
      '"><input type="text" class="form-control" placeholder="New option field" id="option' + optionNo +
      '"><i class="input-group-btn"><button class="btn btn-danger" type="button" id="removeBtn' + optionNo +
      '"><i class="glyphicon glyphicon-minus"></i></button></i></div>');
  });
  // here i want to write code to remove that input field
  $(document).on('click', ".input-group button", function(e) {
      $(this).closest('.input-group').remove();
  });
});

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="col-sm-4 col-sm-offset-4">
    <form class="form-horizontal" action="index" method="post">
        <div id="optionsList"class="form-group">
            <label>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>
        <div class="form-group">
            <button type="submit" class="btn btn-lg btn-success" name="button">Submit</button>
        </div>
    </form>
</div>

＆＃13;

Answer 4

尝试使用以下代码。希望它有所帮助。

＆＃13;

var counter = 1;

$(document).on('click', 'button#moreOptions', function(){
    $("#optionsList").append
('<div class="input-group" style="padding:5px;"><input type="text" class="form-control" placeholder="New option field '+ counter +'"><i class="input-group-btn"><button class="btn btn-danger btn-minus" type="button"><i class="glyphicon glyphicon-minus"></i></button></i></div>');
    counter++;        
});

$(document).on('click', 'button.btn-minus', function(){
    $(this).parents('div.input-group').remove();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4 col-sm-offset-4">
    <form class="form-horizontal" action="index" method="post">     
        <div id="optionsList"class="form-group">
            <label>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>

＆＃13;

Answer 5

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

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

获取按钮的ID以单击减号按钮删除输入字段

5 个答案: