Dynamic javascript using JQuery?

Question

My code is as follows:

<script>

$(document).ready(function() {

    var tagCounter=0;

    $("#tag-add-button").click(function () {
      var text = $("#tagadd").val();
        $("#set-tags").append("<input type='text' id='tag"+tagCounter+"' READONLY>");
      $("#tag"+tagCounter).val(text);
        $("#tagadd").val("");
        tagCounter++;
    });


});
</script>

This does the following:

When tag-add-button is clicked, it takes the text from the inputbox (tagadd) and puts it in a new inputbox thats appended to the set-tags div. The tagadd inputbox is then made blank.

The problem I'm having, is I want each input box to have its own remove button. But I don't see how the javascript can be generated for that when there can be an unlimited number of input boxes...

Any ideas?

Joel Martinez · Accepted Answer · 2011-02-11 16:11:36Z

1

Put the input element inside of a div or span, and make the remove button a sibling of the input element. Then, in the onclick handler of the button, just do something like $(this).parent().remove()

This has the effect of removing both the input element, and the remove button itself

answered Feb 11, 2011 at 16:11

Joel Martinez

47.9k26 gold badges136 silver badges186 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Blair McMillan · Accepted Answer · 2011-02-11 16:12:22Z

1

Rather than using an id (#tag-add-button), use classes and then use the each function of jQuery and traverse to the appropriate elements.

answered Feb 11, 2011 at 16:12

Blair McMillan

5,3492 gold badges28 silver badges45 bronze badges

Comments

Ian Wood · Accepted Answer · 2011-02-11 16:19:29Z

0

$(document).ready(function() {

    var tagCounter=0;

    $("#tag-add-button").click(function () {
        var text = $("#tagadd").val();
        $("#set-tags").append('<input type="text" id="tag'+tagCounter+'" READONLY /><span class="remove">Remove</span>');
        $("#tag"+tagCounter).val(text);
        $("#tagadd").val("");
        tagCounter++;
    });

    $('span.remove').bind('click',function(){
        $(this).prev('input').andSelf().remove();
    });


});

answered Feb 11, 2011 at 16:19

Ian Wood

6,5736 gold badges36 silver badges75 bronze badges

2 Comments

Elliot Over a year ago

I'm trying this code, but nothing happens when I click "remove"

Ian Wood Over a year ago

sorry replace 'bind' with 'live'

Collectives™ on Stack Overflow

Dynamic javascript using JQuery?

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related