Question

var filters_used = new Array();
$('#filter-text').keyup(function(k) {
    $('#error').html('');
    if (k.keyCode == 13) {
        $('#add-filter').click();
    }
});

function reg_remove() {
    $('.remove-filter').click(function() {
        console.debug("remove-filter.click()");
        var col = $(this).children('td:nth-child(2)').html();
        var index = $.inArray(col, filters_used);
        filters_used.splice(index, 1);
        $(this).parents('.filter').remove();
        return false;
    });
}

function check_value() {
    var flag = true;
    var value = $('#filter-text').val();
    var col = $('#filter-type').val();
    var reg = /[^0-9a-zA-Z\s\-]/;
    if (value.match(reg) || value.trim() === "") {
        flag = false;
        $('#error').html('Only letters, numbers, spaces, and dashes (-) are allowed.');
    } else if ($.inArray(col, filters_used) >= 0) {
        flag = false;
        $('#error').html('That column is already being filtered.');
    }
    return flag;
}
$('#add-filter').click(function() {
    if (check_value()) {
        var value = $('#filter-text').val();
        var col = $('#filter-type').val();
        $('#filter-text').val('');
        appendstr = '<tr class="filter"><td>' + value + '</td><td>' + col + '</td><td>' + '<a href="" class="remove-filter">Remove</a></td></tr>';
        $('#filter-form').after(appendstr);
        filters_used.push(col);
        reg_remove();
        //queryDB();
    }
});

function get_filters() {

}?

Link to a fiddle containing my code
I am trying to let users create a list of filters, essentially. Adding them seems to work fine, however the remove() function only works properly when there is only one filter item. If you create a first, then click remove on the bottom item, the onclick() function for that item is called twice, and I can’t for the life of me figure out why.

Answer 1

Can’t see the fiddle running, but from the code you might want to change the

$('#add-filter').click(function() {

to

$('#add-filter').click(function(e) {
    e.preventDefault()

(same with the other click)

EDIT:
Oh, now I can see it running. The actual problem it seems to me is that when you add a ‘remove’ link, you do a rebinding of click for .remove-filter (which includes the already created ones).
Instead what you can do is use .on only once, and it applies to all the elements you have plus whatever new elements you create. Something like…

$('table').on("click", ".remove-filter", function() {
...

do this once in the document.ready and that should do it (remove the call to reg_remove after adding a ‘remove’ link)

P.D. .on works on jquery 1.7 and later, if you use an earlier version, you’d use .live or .delegate to achieve that