CODEWITHSUNDEEP
jqueryjquery-ui
Kubalicious
Kubalicious

Reputation: 13

JQuery - Unable to find element ID after child element is removed

I'm trying to remove a the 'row' div with query after the 'del4' button is selected, and then rename all the inputs within the remaining row div(s). To rename the inputs in the remaining row div(s), I want to loop through the children of the 'sortable' div.

I can find the sortable div prior to removing the row div, but can't find the sortable div after removing the row.

HTML:

<div class="sortable ui-sortable" id="AutostationCLEAR">
    <div class="row">
        <div class="col-md-1"><div class="col-md-6"><p><strong><input type="hidden" name="state_id0" value="0">1.</strong></p></div><div class="col-md-6"><p class="text-muted"><span class="glyphicon glyphicon-align-justify"></span></p></div></div>
        <div class="col-md-6"><p><input type="text" class="form-control" name="stateName0" placeholder="State"></p></div>
        <div class="col-md-2"><p><input type="checkbox" class="form-control" name="occupied0" value="1"></p></div>
        <div class="col-md-2"><p><input type="checkbox" class="form-control" name="clear0" value="1"></p></div>
        <div class="col-md-1"><p><button type="button" class="btn btn-danger btn-sm del4" id="0"><span class="glyphicon glyphicon-remove"></span></button></p></div>
    </div>
    <div class="row">
        <div class="col-md-1"><div class="col-md-6"><p><strong><input type="hidden" name="state_id1" value="">2.</strong></p></div><div class="col-md-6"><p class="text-muted"><span class="glyphicon glyphicon-align-justify"></span></p></div></div>
        <div class="col-md-6"><p><input type="text" class="form-control" name="stateName1" placeholder="State"></p></div>
        <div class="col-md-2"><p><input type="checkbox" class="form-control" name="occupiedundefined" value="1"></p></div>
        <div class="col-md-2"><p><input type="checkbox" class="form-control" name="clear1" value="1"></p></div>
        <div class="col-md-1"><p><button type="button" class="btn btn-danger btn-sm del4" id="1"><span class="glyphicon glyphicon-remove"></span></button></p></div>
    </div>
</div>

JQuery:

$(document).on('click','.del4',function(){
    alert($(this).closest(\".sortable\").attr('id')); \\shows sortable div id as expected
    $(this).closest(\".row\").remove(); \\remove the row
    alert($(this).closest(\".sortable\").attr('id')); \\no longer shows sortable div id
});

Any help would be appreciated!

Upvotes: 0

Views: 435

Answers (2)

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67187

Try to cache the closest element initially as other experts suggested.

$(document).on('click','.del4',function(){
    var cache = $(this).closest('.sortable');
    $(this).closest(".row").remove(); 
    alert(cache.attr('id')); 
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Since you have removed the row containing the current element from the dom tree, the current element is no longer present in the dom tree, so it will not be able to find the sortable element.

So you need to get the reference to the closest sortable fore the row is removed

$(document).on('click', '.del4', function () {
    var $sortable = $(this).closest('.sortable');
    alert($sortable.attr('id')); //shows sortable div id as expected
    $(this).closest('.row').remove(); //remove the row
    //do further processing using $sortable here
});

Demo: Fiddle

Upvotes: 2

Related Questions