Cannot remove appended elements with jQuery

I created a simple multi-text input with jQuery, appending text fields working fine. But, struggling to remove them. I googled, checked past questions but, don't know how to match them to my code.

Here is my code

$(document).ready(function () {
    var i = 1;
    (function () {
        $('.dd').on('click', '.addRow', function () {
            i = i+1;
            var start = $('#fields'),
            newRow = $('<input type="text" name="i" class="quantity" /><p class="xx">X</p><br><br>');
            $(start).append(newRow);
        });
    })();
});

HTML

<div class="dd">
    <form action="js-more-fields.php" method="get">
        <div id="fields">
        </div>
        <p class="addRow">Add a Row</p>
        <input type="submit" id="submit" />
    </form>
</div>

Answers


Here is working fiddle

 $(document).ready(function () {
    var i = 1;
    (function () {
        $('.dd').on('click', '.addRow', function () {
            i = i+1;
            var start = $('#fields'),
                newRow = $('<div id='+i+'><input type="text" name="i" class="quantity"/><span class="delete">X</span></div><br/>');
            $(start).append(newRow);
        });
        $('body').on('click', '.delete', function(e) {
        $(this).parent().remove();
       });


    })();
    });

:You are trying to bind click on dynamic created element which does not exist.You can use delegate or on for doing this.


Use JQuery on for dynamically created elements:

api.jquery.com


Need Your Help

How to prevent Liferay modify my web.xml?

java spring liferay liferay-6

I am migrating a Liferay 5.x site to 6.1GA2. My problem is that Liferay 6.1 modifies the web.xml of a deployed app that is basically a web service implementation.