Невозможно получить HTML-элемент, добавленный через JavaScript

Question

Как видно из названия, у меня возникли проблемы с доступом к элементу HTML, который был добавлен с помощью JavaScript.Я пытаюсь извлечь элемент DOM, используя document.getElementById ('sampleID') после добавления HTML-div с использованием JavaScript.Однако исходный код HTML не отражает внесенные изменения, поэтому я не могу получить новый элемент.

Приложение очень похоже на список задач, но отслеживает приложения, а не задачи.В элементе div каждого приложения есть флажок, и запрос POST все еще проходит, удаляя приложение из базы данных, но он не отображается на странице до обновления.

Единственная связанная концепцияЯ наткнулся на интерфейс MutationObserver для JavaScript, который, по-видимому, не позволяет получить доступ к добавленным элементам.

Все предложения приветствуются!

$('#applicationDelete').submit(function(event) {
    event.preventDefault(); // Stops browser from navigating away from page
    var names = [];
    $(":checkbox").each(function () {
        var isChecked = $(this).is(":checked");
        if (isChecked) {
            names.push($(this).attr("class"));
        }
    });
    var data = { names: names }
    console.log('Data: ' + names);
    $.ajax({
        type: 'POST',
        contentType: 'application/json',
        url: window.location + 'applications/delete',
        data: JSON.stringify(data),
        dataType: 'json',
        success: function(res) {
            if (res.response == 'success') {
                var application;
                for (i in names) {
                    application = document.getElementById(names[i]);
                    application.parentNode.removeChild(application);
                }
            }
        }
    });
});

РЕДАКТИРОВАТЬ:

function addApplication(application) {
    const container = document.getElementsByClassName('applicationDelete')[0];
    const appWrap = document.createElement('div');
    appWrap.classList.add('application-wrapper');

    // ADDED THIS LINE THANKS TO SUGGESTIONS!
    appWrap.id = application.company;

    const checkbox = document.createElement('div')
    checkbox.classList.add('checkbox');
    const check = document.createElement('input');
    check.type = 'checkbox';
    check.classList.add(application.company);
    const app = document.createElement('div')
    app.classList.add('application');

    checkbox.appendChild(check);
    appWrap.appendChild(checkbox);
    appWrap.appendChild(app);
    container.insertBefore(appWrap, container.childNodes[3]);

    app.innerHTML = '\
    Company: ' + application.company + '<br>\
    Position: ' + application.position + '<br>\
    Experience: ' + application.experience + '<br>\
    Source: ' + application.source + '<br>';

}

Извиняюсь за код спагетти!Я уверен, что мое использование классов и идентификаторов далеко от правильного соглашения о кодировании, но вам, ребята, все же удалось обнаружить мою ошибку (даже не увидев метод addApplication).Спасибо!

Answer 1

При проверке isChecked вы помещаете атрибут class элемента в массив names:

names.push($(this).attr("class"));

Это означает, что ваш массив names состоит из classes, чтоможно найти в DOM, но позже вы ищете ID s.Самое простое решение - заменить document.getElementById(names[i]); для .querySelector() метода:

document.querySelector(names[i]);
// or via jQuery:
$(`.${names[i]}`)

☝️, но это только в том случае, если вы можете гарантировать, что ваши классы уникальны (поскольку querySelector() находит first элемент, соответствующий переданному селектору запроса).

Однако более элегантным решением является использование идентификаторов вместо классов, поскольку спецификация HTML для начала требует, чтобы они были уникальными (чтопредоставляет вам отказоустойчивость, которую вы не написали или сгенерировали дублированные классы).Поэтому, учитывая, что все ваши флажки теперь имеют уникальные идентификаторы:

names.push($(this).attr("id"));
// now you can look for ID-s again!
document.getElementById(names[i]);
// Or a shortcut via jQuery (saving the extra variable):
application.parentNode.removeChild($(`#${names[i]}`));

Answer 2

Вы помещаете имена классов в массив имен с помощью этого.

names.push($(this).attr("class"));

И извлекаете элементы по идентификатору.

application = document.getElementById(names[i]);

Вы должны хранить идентификаторы в массиве имен (IЯ бы выбрал другое имя для массива, он предлагает вам хранить имена).

 names.push($(this).attr("id"));

Или получить элементы с одним из следующих значений.

document.getElementsByClassName(names[i]); //returns array

document.querySelector('.' + names[i]); //returns dom element

$('.' + names[i]); //returns jQuery object.

Поскольку вы используете jQuery, я предлагаюиспользовать решение jQuery.