Удалить элементы перед выполнением ajax

Question

У меня есть страница html со скрытыми контейнерами шаблонов, которая используется JavaScript для добавления новых разделов на страницу html.

Эти контейнеры / разделы содержат поля ввода, которые я буду sh для отправки через ajax на php сервер.

I wi sh для удаления контейнеров шаблонов со страницы html перед отправкой полей ввода с ajax, так как я не хочу данные из контейнеров шаблонов.

Когда я пытаюсь удалить контейнеры шаблонов со страницы html перед выполнением ajax, создается впечатление, что JavaScript больше не может найти данные.

У меня есть обходной путь, но я пытаюсь понять, почему это происходит.

function submitData(){      
    let templates = document.getElementById("template-container");
    templates.remove();
    let data = getData();
    let dataHTMLJsonString = JSON.stringify(data);

    let doIt = true;
    if (doIt){
       $.ajax({
            type: "POST",
            url: "processes/writefile.php",
            data: {dataHTML: dataHTMLJsonString},
            cache: false,
            success: function(){
                alert("5x15 Sent");
                document.body.appendChild(templates);
            }
        });
}

HTML

<!-- Real data -->
<div class="customer-input-container">
<label>Customers</label>
<select name="customers" class="customer-input" bold="true">                        
    <option>1</option><option>2</option><option>3</option> 
</select>
</div>

<!-- Template data -->
<div class="customer-input-container" id="template-container">
<label>Customers</label>
<select name="customers" class="customer-input" bold="true">                        
    <option>1</option><option>2</option><option>3</option> 
</select>
</div>

JavaScript

function getData{
    tmpData = "";
    sectionData = document.getElementsByClassName("customer-input");
    for(i = 0; i <= section.length; i++){
        tmpData += sectionData[i].value;
    }
}

Answer 1

getData() использует DOM для получения информации. Итак, вы получаете ссылку на шаблонный элемент DOM, затем удаляете его из DOM, и теперь данных больше нет ..

let templates = document.getElementById("template-container");
templates.remove();
let data = getData();
let dataHTMLJsonString = JSON.stringify(data);

Я бы переписал его примерно так:

let templates = document.getElementById("template-container");
let data = getDataFromTemplates(templates); // explicits the dependency on the DOM
let dataHTMLJsonString = JSON.stringify(data);
templates.remove();

А внутри getData вы можете использовать templates.getElementsByClassName("customer-input")