Zählung dynamisch erstellter HTML-Elemente ⇐ JavaScript

[Anonymous]

Ich versuche, HTML-Elemente zu zählen, die dynamisch erstellt/gelöscht wurden, um sie später zu sortieren.
Ich habe während meiner Recherche viele verschiedene Codelösungen ausprobiert, hatte aber keinen großen Erfolg. Vielleicht kann ein anderer Augenpaar etwas Offensichtliches erkennen, das mir entgangen ist, obwohl ich den JS-Code bereinigt habe, um die Fehler zu beseitigen, die ich versucht habe.
Dies ist ein Bestellformular, das letztendlich eine JSON-Ausgabe zum Zusammenführen in eine Datenbank haben wird. Der Abschnitt, mit dem ich Schwierigkeiten habe, befindet sich im Codepen-Link. Der HTML-Code beginnt mit einer statischen ersten Zeile mit der Option „Zeile hinzufügen“. Die Gesamtzeilenzahl umfasst die erste Zeile des statischen HTML. Ich habe einen Wrapper, der die -Elemente einer mit Klassenname = input-wrap.
zählt

Code: Select all

function resetIndexes() {
let j = 1;

// Select all .input-wrap elements
document.querySelectorAll('.input-wrap').forEach(inputWrap => {
if (j > 1) {
// Find all input elements inside this wrapper
inputWrap.querySelectorAll('input, textarea').forEach(input => {
const baseName = input.name.split('_')[0];
input.name = `${baseName}_${j}`;
input.placeholder = ``;
});
}
j++;
});
}

document.addEventListener('DOMContentLoaded', () => {
const scntDiv = document.querySelector('#tr-scents');
let i;

document.querySelector('#addScnt').addEventListener('click', e => {
e.preventDefault();

// Count all wrappers instead of inputs
i = document.querySelectorAll('#tr-scents .input-wrap').length + 1;

const wrapper = document.createElement('tr');
wrapper.className = 'input-wrap';
wrapper.innerHTML = `







Del Row`;

scntDiv.appendChild(wrapper);
i++;
});

// Event delegation for remove links
document.querySelector('#tr-scents').addEventListener('click', e => {
if (e.target.classList.contains('remScnt')) {
e.preventDefault();

if (i > 2) {
e.target.closest('tr').remove();
resetIndexes();
}
}
});
});

Ich suche nur nach Hilfe, um die tatsächliche Zeilenanzahl zu einem neuen Element zu ermitteln, das in console.log angezeigt wird.
Vorbehalt: Dies ist ein offline-browserbasiertes Formular, das keine Online-Bibliothek wie jQuery usw. verwenden kann.
Codepen