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 我很难让我的第二个功能发挥作用。我不确定为什么。

Answer 1

您正在动态添加元素，这意味着在脚本运行时元素不存在，因此没有事件处理程序。您可以使用jQuery .on()方法将事件处理程序委托给静态父元素，如下所示：

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

我的第二个功能是不删除父元素

1 个答案: