How to remove input using 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 put a button with a [+] plus button, and when I click on it. delete this 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 to your HTML line and wrap a <div> to identify the line. Then use event delegation to bind to dynamically created delete 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 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> 

Answer 3

 var i = 1; $('.button').click(function () { $('<input name="name' + (++i) + '" type="text"/><button class="remove">remove</button><br>').prependTo($(this).closest('div')); }); $("div").on("click", ".remove",function () { $(this).prev("input").add($(this).next("br")).add($(this)).remove(); }); 

Demo

Answer 4

I would highly recommend using Knockout, Angular or something like that. This is an implementation of the MVVM pattern, which is very useful in your scenario.

Here is an example of how Knockout.js works and directly correlates with your problematic script.