獲取按鈕的ID刪除輸入字段上的減號按鈕

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而不是ID的所有

簡體追加HTML需要按鈕：

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

委託的事件偵聽器的任何.remove-btn加入到DOM中未來

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

Answer 2

添加onclick處理程序，當您生成您的按鈕如下：

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

Answer 3

因爲你添加的新飛按鈕，你需要委派click事件文檔：

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

這部分：「。輸入組按鈕」表示：監聽輸入組內的按鈕元素相關的點擊事件

closest用於得到父div被刪除。

的片段：

$(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(); 
 
    }); 
 
});

<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>

Answer 4

，如果你不打算改變它的價值，並與多個元素結束了相同的ID代替ü首先不使用動態創建的元素id的se類。即。

class="removeBtn' 

下一個動態創建的元素中使用事件冒泡附加事件

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

Answer 5

與下面的代碼試試。希望能幫助到你。

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(); 
 
});

<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>