Remove input field with span

Question

I written this code for creating new input fields, and i need to somehow modify it so i can remove the fields. I tought about adding var counter to mySpan and then i make$(#removeBox).click(function() and there i can get an id of the input field i need to delete. But i cannot make span clickable, and when I try to do it with like this <a class="deleteBox' + counter'"><span class="glyphicon glyphicon-remove"></span></a> It says that I am missing ). I know there are some solutions on this problem here, but i wanted to make mine work.

 var counter = 2;
    $("#addTextField").click(function() { 
        var newTextBoxDiv = $(document.createElement('div')).attr("id", 'textboxdiv'+counter);
        newTextBoxDiv.after().html('<input type="text" name="textbox' + counter + '" placeholder="Category" /><span id="mySpan" class="glyphicon glyphicon-remove"></span>');
        newTextBoxDiv.appendTo("#textboxgroup");
        counter++;

    });

Can you share executable demo/snippet or [JSFiddle](https://jsfiddle.net/) ? [_Create a Minimal, Complete, and Verifiable example_](http://stackoverflow.com/help/mcve) — Rayon, Sep 15 '16 at 07:23

score 2 · Accepted Answer · answered Sep 15 '16 at 07:30

2

try like this: The trick is to remove the element you clicked on which you can get with $(this) inside the click

    var counter = 0;
    $("#addTextField").on('click', function() { 
            var newTextBoxDiv = $(document.createElement('div')).attr("id", 'textboxdiv'+counter);
            newTextBoxDiv.after().html('<div class="wrapper">' + counter + '<input type="text" name="textbox' + counter + '" placeholder="Category" /><span class="glyphicon glyphicon-remove">remove</span></div>');
            newTextBoxDiv.appendTo("#textboxgroup");
            counter++;
    
        });
        
    $('body').on('click', '.glyphicon-remove', function(){
     $(this).closest('.wrapper').remove();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="addTextField">click to add</div>
    
    <div id="textboxgroup"></div>

In your code you added an ID <span id="mySpan" on every click which is bad cause an ID should always be unique. So if you add it more than once it is not unique anymore. Better use classes instead...

answered Sep 15 '16 at 07:30

caramba

21,963
19
86
127

Thanks, that works, i modified it a bit, I added an id to span `` and then got the id and removed the div that wrapped input+span `var id = $(this).attr('id'); $("#textboxdiv" + id).remove();` – rtom Sep 15 '16 at 08:00
Glad to hear. If you really want to use an ID why so ever you might want to do ` – caramba Sep 15 '16 at 08:05
Okay, thanks, but now there is a problem I want to use same script for adding same form, (One is for adding Brand and categories that it belongs to, and other is for adding Categories and brands that belongs to that category). Is this somehow possible ? – rtom Sep 15 '16 at 08:16
@rtom almost everything is possible. Probably it is just an ID problem. But not sure cause I don't know all your markup. With classes you can find all elements belonging to that given class. You can use multiple classes or data-attributes to know on which element you are or to use data from data-attribute ... – caramba Sep 15 '16 at 08:19
Let's say it looks like this https://jsfiddle.net/7zpzs8u6/1/ , what can i do so i can also target the second form, i tried to put it in classes or give each form an unique id but it doesnt wok. – rtom Sep 15 '16 at 08:48
1

@rtom as easy as this: https://jsfiddle.net/7zpzs8u6/2/ just forget about IDs there are still TWO `id="textbox1"` which is not good! – caramba Sep 15 '16 at 08:57

score 1 · Answer 2 · edited Sep 15 '16 at 07:45

1

try this:

var counter = 0;
$('#add').click(function() {

  $('#target').append('<span>New Input: <input type="text"><button id="remove' + counter + '">Remove</button><br></span>');

  $('#remove' + counter).click(function() {

    $(this).parent().html('');
    counter--;
  });
  counter++;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<button id="add">Add</button>
<div id="target"></div>

edited Sep 15 '16 at 07:45

Alessio Cantarella

5,077
3
27
34

answered Sep 15 '16 at 07:28

Darin Cardin

627
1
4
10

1

Now that i look at the code, i notice that the generated ids are not guaranteed to be unique if you delete and add a new one. However, you can use the same class for all of them. then get all the inputs using jquery. – Darin Cardin Sep 15 '16 at 07:48

Remove input field with span

2 Answers2