JQuery - невозможно найти идентификатор элемента после удаления дочернего элемента

0

Я пытаюсь удалить 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
});

Любая помощь будет оценена!

Теги:

2 ответа

2
Лучший ответ

Поскольку вы удалили 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
});

Демо: скрипка

Поделиться
  • 0
    Вот и все - большое спасибо !!
0

Попробуйте кэшировать ближайший элемент изначально, как предполагали другие эксперты.

$(document).on('click','.del4',function(){
    var cache = $(this).closest('.sortable');
    $(this).closest(".row").remove(); 
    alert(cache.attr('id')); 
});
Поделиться
  • 0
    даже если вы кешируете ссылку на элемент row , после его удаления у него не будет родителя, поэтому ближайшая ссылка потерпит неудачу
  • 0
    @ArunPJohny ооо ... ладно ... мы можем пройти внутри этого удаленного элемента? Я знаю, что вы не ответите на это, по крайней мере, ссылку мне на одну такую ссылку ..
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню