Question

我在 HTML ：

中有一个div

<div class="form-check form-check-inline">
        <div class="input-group">
            <label class="form-check-label">
                <input class="form-check-input" type="radio" name="Other" id="Other" value="Other">Other
            </label>
            <input type="text" class="form-control" id="unique" aria-label="Text input with radio button" disabled>
            <div class="btn-group" role="group" aria-label="Basic example">
                <button type="button" class="btn btn-success ml-2 border rounded-right" id="Add">Add</button>
                <button type="button" class="btn btn-success border rounded" id="Remove">Remove</button>
                <button type="submit" class="btn btn-primary ml-3 border rounded">Submit</button>
            </div>
        </div>
    </div>

单选按钮旁边＆＃34;其他＆＃34;是一个输入允许用户添加更多银行类型以及删除它这就是我提出的 Jquery ：

var AddButton = $('button[id=Add]');
var RemoveButton = $('button[id=Remove]');
var NewBankDiv  = $('<div class="form-check form-check-inline"></div>');
var NewBankLabel = $('<label class="form-check-label"></label>');
var AddBank = $('input[id=unique]');
AddButton.click(function () {
    event.preventDefault();
    NewBankLabel.append(AddBank.val());
    NewBankDiv.append(NewBankLabel);
    NewBankDiv.show();
});
RemoveButton.click(function () {
    NewBankDiv.remove();
});

它无法正常工作。我应该改变什么？

Answer 1

这是它的工作原理

(function($){

  var AddButton = $('button[id=Add]');
  var RemoveButton = $('button[id=Remove]');

  AddButton.click(function (event) {
    event.preventDefault();
    var NewBankDiv  = $('#newBank');
    var AddBank = $('input[id=unique]');

    var NewBankLabel = '<label class="form-check-label">' + AddBank.val() + '</label>';
    NewBankDiv.append(NewBankLabel);
    NewBankDiv.show();
  });
  RemoveButton.click(function () {
    $('#newBank label:last-child').remove();
  });
  
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-check form-check-inline">
  <div class="input-group">
    <label class="form-check-label">
      <input class="form-check-input" type="radio" name="Other" id="Other" value="Other">Other
    </label>
    <input type="text" class="form-control" id="unique" aria-label="Text input with radio button" >
    <div class="btn-group" role="group" aria-label="Basic example">
      <button type="button" class="btn btn-success ml-2 border rounded-right" id="Add">Add</button>
      <button type="button" class="btn btn-success border rounded" id="Remove">Remove</button>
      <button type="submit" class="btn btn-primary ml-3 border rounded">Submit</button>
    </div>
  </div>
  <div id="newBank" class="form-check form-check-inline" style="display: none;"></div>

</div>

Answer 2

你错了：

var NewBankDiv  = $('<div class="form-check form-check-inline"></div>');

您可以更改为：

var NewBankDiv  = $('.form-check-inline');

它会完成。

Answer 3

以下是每次单击“添加”按钮时附加新项目的最小示例，它将删除单击“删除”时添加的最新项目：

HTML：

<div class="container form-check">
<h1> Hey There! </h1>

</div>
<button id="Add">Add</button>
<button id="Remove">Remove</button>

JS：

var divCount = 1;

$('#Add').click(function(){
    $('.container').append(generateNewDivHTML(divCount++));
});

$('#Remove').click(function(){
    $('.form-check > .appended').last().remove();
});

function generateNewDivHTML(count){
    return '<div class="form-check form-check-inline appended" data-ref='+count+'>'+count+'</div>';
}

您可以在此JSFiddle中运行我的示例。

希望这有帮助！

干杯！

Answer 4

我认为这就是你想要的。只要用户在文本框中输入并按添加，您想要添加具有银行类型的新div，并且只要您想删除银行类型，只需在文本框中键入名称，然后单击删除即可删除该特定银行类型。

此外，我在HTMl中添加了一个div <div id='banklabels'></div>，其中将附加所有银行类型，因为您没有提到要添加所有银行类型的位置。希望这可以帮助你!!

$(document).ready(function() {
  $('#Other').change(function() {
    if (this.checked)
      $('#unique').prop('disabled', false);
    else
      $('#unique').prop('disabled', true)
  });
  var AddBank = $('#unique');;
  $('#Add').click(function() {
    $('#banklabels').append('<div class="form-check form-check-inline ' + AddBank.val() + '"><label class="form-check-label">' + AddBank.val() + '</label></div>')
  });
  $('#Remove').click(function() {
    if (AddBank.val() != '')
      $('#banklabels .' + AddBank.val()).remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-check form-check-inline">
  <div class="input-group">
    <label class="form-check-label">
      <input class="form-check-input" type="radio" name="Other" id="Other" value="Other">Other
    </label>
    <input type="text" class="form-control" id="unique" aria-label="Text input with radio button">
    <div id='banklabels'></div>
    <div class="btn-group" role="group" aria-label="Basic example">
      <button type="button" class="btn btn-success ml-2 border rounded-right" id="Add">Add</button>
      <button type="button" class="btn btn-success border rounded" id="Remove">Remove</button>
      <button type="submit" class="btn btn-primary ml-3 border rounded">Submit</button>
    </div>
  </div>
</div>

在Jquery中添加和删除按钮

4 个答案: