CODEWITHSUNDEEP
javascriptjquery
Tharindu Thisarasinghe
Tharindu Thisarasinghe

Reputation: 3998

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>

Upvotes: 1

Views: 291

Answers (2)

Muhammad Atif
Muhammad Atif

Reputation: 1102

Use JQuery on for dynamically created elements:

api.jquery.com

Upvotes: 1

Rajan Singh
Rajan Singh

Reputation: 631

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.

Upvotes: 4

Related Questions