Add and Remove Button in Jquery

Question

Here I have a div in HTML:

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

Next to the Radio Button "Other" is an input allow user to add more bank type as well as remove it And here 's what I came up with 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();
});

It's not working.What should I change?

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — guradio, Nov 07 '17 at 05:30
You are actually assigning a jQuery selector in some of your variables above, not actual HTML... — idelara, Nov 07 '17 at 05:36

code.rider · Answer 1 · 2017-11-07T06:19:00.260

this is how it works

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

Thanks for helping . I just have a quick question that if I want change class and change type of the Addbank input to radio button before put it in NewBankLabel, what should I do? — Hoàng Việt, Nov 12 '17 at 07:17

score 0 · Answer 2 · answered Nov 07 '17 at 05:39

0

You wrong at line:

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

You can change to:

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

It will done.

answered Nov 07 '17 at 05:39

Hong Van Vit

2,884
3
18
43

score 0 · Answer 3 · answered Nov 07 '17 at 05:56

Here is a minimal example that will append a new item each time the Add button is clicked, and it will remove the latest item that was added when clicking on Remove:

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>';
}

You can run my example in this JSFiddle.

Hope this helps!

Cheers!

score 0 · Answer 4 · answered Nov 07 '17 at 06:19

I think this is what you want. whenever a user type in the textbox and press add you want to add the new div with bank type and whenever you want to remove a bank type, just type the name in the textbox and click remove which will remove that particular bank type.

Also i have added a div <div id='banklabels'></div> in the HTMl where all the bank types will be appended as you haven't mentioned where you want to append all the bank types. Hope this helps you !!

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

Add and Remove Button in Jquery

4 Answers4