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?

Answer 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