Something is wrong with remove() function in jQuery

Question

<script>
$(document).ready(function(){
    var i = <?=$iMaxId?>;
    var c = 0;
    $('#addphone').click(function(){
        i += 1;
        c += 1;
        var sTag = "<div class='trow' id='Phone"+i+"'><div>Phone No. </div><div><input type='text' name='sPhone[]' ><input type='button' value='delete' class='delete' id='"+i+"'></div></div>";
        $('#imgfield').last().before(sTag);
    });


    $(".delete").click(function()
    {
        var iId = $(this).attr("id");;
        $("#Phone" + iId).remove( );
    });
});
</script>

This script is adding input fields flawlessly but is not able to remove them when clicked the delete button.

you most likely try to attach the delete-function before the input fields are created. Thus the newly inserted input-fields do not have the delete-handler attached. use live-events (```live()```) which are provided by JQuery — newBee, Feb 09 '16 at 07:42
*"Something is wrong with remove() function in jqeury"* - Or, possibly, there's something wrong in *your* code... — nnnnnn, Feb 09 '16 at 07:56

score 1 · Answer 1 · answered Feb 09 '16 at 07:42

1

update your delete function like

$("body").on("click",".delete", function()
    {
        var iId = $(this).attr("id");;
        $("#Phone" + iId).remove( );
    });

answered Feb 09 '16 at 07:42

Shailesh Singh

421
2
8

yeyy! this did it.. Can you please explain this code for me? – Jay Wayne Feb 09 '16 at 07:45
the element which you want to delete is dynamical added by javascript event, delete button is also in that element. You need to review [Event binding on dynamically created elements](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – Shailesh Singh Feb 09 '16 at 07:52

score 1 · Answer 2 · answered Feb 09 '16 at 07:50

$(".delete").click(function() {
    var iId = $(this).attr("id");;
    $("#Phone" + iId).remove( );
});

This code snippet runs immediately. The $(".delete") selector selects all the elements that CURRENTLY exist in the document with the class name "delete" and sets a click event listener to those elements. However, dynamically added buttons with the "delete" class will not have this listener because they have not been previously selected, because they did not previously exist.

One way to get it to work is to place the code that sets the click listener inside the #addphone click callback function, i.e.

$(document).ready(function(){
    var i = <?=$iMaxId?>;
    var c = 0;
    $('#addphone').click(function(){
        i += 1;
        c += 1;
        var sTag = "<div class='trow' id='Phone"+i+"'><div>Phone No. </div><div><input type='text' name='sPhone[]' ><input type='button' value='delete' class='delete' id='delete"+i+"'></div></div>";
        $('#imgfield').last().before(sTag);

        $("#delete" + i).click(function() {
            var i = $(this).attr("id").replace("delete", "");
            $("#Phone" + i).remove();
        });
    });

});

BTW, you shouldn't use pure numbers as IDs. Its not allowed in HTML4. Some browsers may complain.

score 0 · Answer 3 · answered Feb 09 '16 at 07:56

0

this may works fine for you

$(document).on('click','.delete',function(){
    $(this).parents('.trow').remove();
})

answered Feb 09 '16 at 07:56

Something is wrong with remove() function in jQuery

3 Answers3