My second function is not removing the parent element

Question

HTML

<form action="form.php" method="post">
    <fieldset>
        <legend>Query string</legend>
        <div class="query_string">
            <div class="parameter">
                <label for="parameter_1">Parameter</label>
                <input type="text" id="parameter_1" required="required" />
            </div>
            <div class="argument">
                <label for="argument_1">Argument</label>
                <input type="text" id="argument_1" required="required" />
            </div> <a href="#" class="add_query_string">➕</a>

        </div>
    </fieldset>
</form>

JS

$(document).ready(function () {

    var x = 1;

    $(".add_query_string").click(function (e) {
        e.preventDefault();
        x++;
        $('\
            <div class="query_string">\
                <div class="parameter">\
                    <label for="parameter_' + x + '">Parameter</label>\
                    <input type="text" id="parameter_' + x + '" required="required"/>\
                </div>\
                \
                <div class="argument">\
                    <label for="argument_' + x + '">Argument</label>\
                    <input type="text" id="argument_' + x + '" required="required"/>\
                </div>\
                \
                <a href="#" class="remove_query_string">➖</a>\
            </div>').insertAfter(".query_string:last");
    });

    $(".remove_query_string").click(function (e) {
        e.preventDefault();
        $(this).parent("div").remove();
        x--;
    });

});

Link to the fiddle I'm having difficulty getting my second function to work. I'm not sure why.

@Juhana so I need to use `on` instead? Will I get into trouble selecting multiple instances of the class `query_string`? — Jonathan, Oct 21 '14 at 20:33

score 2 · Accepted Answer · answered Oct 21 '14 at 20:34

2

You are adding the elements dynamically, which means the element was not present while your script ran, and hence doesn't have an event handler. You can use jQuery .on() method to delegate the event handler to a static parent element as follows:

$(document).on("click",".remove_query_string",function (e) {
    e.preventDefault();
    $(this).parent("div").remove();
    x--;
});

answered Oct 21 '14 at 20:34

T J

40,740
11
73
131

1

`$(document).` is the sole thing I was missing in earlier revisions of the code when I was trying something like `$(".query_string").on("click", ".remove_query_string", function(e) { ... });`... ah! – Jonathan Oct 21 '14 at 20:37
@defaye `document` is just an example... it is better to use the closest static parent element, in your case probably the `
` so that the event will reach it quickly..
– T J Oct 21 '14 at 20:39
So basically `$(".query_string")` was not working because it was dynamically created, and I have to select something already in the DOM? I think I've understood my error now. – Jonathan Oct 21 '14 at 20:42
1

That is what i mentioned in the answer... `$(".query_string")` finds nothing when your script which attaches the handler runs... If you add the element later it will not have a handler since it was not there when you tried to attach the handler... – T J Oct 21 '14 at 20:45
Thanks for your help this was really insightful :) – Jonathan Oct 21 '14 at 20:45

My second function is not removing the parent element

1 Answers1