Cannot remove appended elements with jQuery

Question

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>

Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Bhojendra Rauniyar, Dec 01 '15 at 05:35
Thanks! I checked the fiddle. Why should I wrap the appending with a
? — Tharindu Thisarasinghe, Dec 01 '15 at 06:01
@TharinduLucky I believe Rayon added the div in order to remove the adjacent p and br elements. — iamchris, Dec 01 '15 at 06:08
Ok.. :) It's because, we click the remove button and we need to remove entire input field with along with the remove button. So we need a parent. So, parent is removed. — Tharindu Thisarasinghe, Dec 01 '15 at 06:11

score 4 · Answer 1 · answered Dec 01 '15 at 05:52

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.

Thanks! I'll go with @Rayan's fiddle. Thanks anyway! – Tharindu Thisarasinghe Dec 01 '15 at 06:12 — Tharindu Thisarasinghe, Dec 01 '15 at 06:12

score 1 · Answer 2 · edited Dec 01 '15 at 06:02

1

Use JQuery on for dynamically created elements:

api.jquery.com

edited Dec 01 '15 at 06:02

ρяσѕρєя K

130,641
51
193
212

answered Dec 01 '15 at 05:36

Muhammad Atif

1,020
9
20

this should be a comment – ρяσѕρєя K Dec 01 '15 at 06:02

Cannot remove appended elements with jQuery

2 Answers2