Я пытаюсь удалить div "row" с запросом после того, как выбрана кнопка "del4", а затем переименуйте все входы в оставшиеся строки div (s). Чтобы переименовать входы в оставшейся строке div (s), я хочу пропустить дочерние элементы "сортируемого" div.
Я могу найти сортируемый div до удаления строки div, но не могу найти сортируемый div после удаления строки.
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
});
Любая помощь будет оценена!
Поскольку вы удалили row
содержащую текущий элемент из дерева dom, текущий элемент больше не присутствует в дереве dom, поэтому он не сможет найти sortable
элемент.
Таким образом, вам нужно получить ссылку на ближайшую sortable
чтобы удалить строку
$(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
});
Демо: скрипка
Попробуйте кэшировать ближайший элемент изначально, как предполагали другие эксперты.
$(document).on('click','.del4',function(){
var cache = $(this).closest('.sortable');
$(this).closest(".row").remove();
alert(cache.attr('id'));
});
row
, после его удаления у него не будет родителя, поэтому ближайшая ссылка потерпит неудачу