How to remove input by Javascript

Question

var i = 1;
$('.button').click(function() {
  $('<br/><input name="name' + (++i) + '" type="text"/>').insertBefore(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <input name="name1" type="text" /><button class="button">+</button>
</div>

How can I place a button with [ + ] plus button, and when I click on it. button remove that field.

Answer 1

You can do something like this

var i = 1;
$('.button').click(function() {
  $('<br/><input name="name' + (++i) + '" type="text"/><button class="button1">-</button>').insertBefore(this);
});
$(document).on('click', '.button1', function() {
  $(this)
    .prev('input').remove()
    //removing input field
    .end().prev('br').remove()
    //removing br tag
    .end().remove();
  //removing the button
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <input name="name1" type="text" />
  <button class="button">+</button>
</div>

Answer 2

Just add a new button template into your HTML string and a wrapping <div> to identify the row. Then use event delegation to bind onto the dynamically created remove buttons:

var i = 1;
$('.button').click(function() {
  // Wrap each row in a div. Won't need a <br> to create a line break and it's styleable
  $('<div><input name="name' + (++i) + '" type="text"/><button class="remove">-</button></div>').insertBefore(this);
});
// We need to use event delegation here, as the remove buttons are dynamically generated
$(document).on("click", ".remove", function() {
  // Remove the parent, which is the rows <div> element
  $(this).parent().remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button">+</button>