Suppression d'éléments dynamiques et réorganisation de ces éléments Valeurs et ID

J'ai une fonction qui crée un élément DOM surClick. Cet élément contient des entrées avec des noms de matrice .

Au début, j'ai déjà un élément (le même que ceux que je crée surClick).

<tbody id="elementsBody"> <tr id="element1"> // 1 becomes 2 and so on when new element is added <td> <input type="hidden" name="numbers[]" value="1" /> // 1 becomes 2 and so on when new element is added </td> <td> <input type="text" name="titles[]" /> </td> </tr> // Newly created Elements goes in here!!! </tbody> 

C'est ma fonction qui crée plus d'éléments comme celui ci-dessus.

Et crée également un DIV de bouton de suppression pour cet élément nouvellement créé.

 function addElement() { var elementsBody = document.getElementById('elementsBody'); var numbers = document.forms[1].elements['numbers[]']; var number = numbers.length+1; if (isNaN(number)) { var number = 2; } var numberInput = '<td><input type="hidden" name="numbers[]" value="'+ number + '" /></td>'; var titleTd = '<td><input type="text" name="titles[]" /></td>'; // This is the Delete Button DIV // I want to create a function (deleteElement) which Removes This Element var deleteButton = '<td><div onClick="deleteElement('+ number + ')">Delete Element</div></td>'; elementsBody.insertAdjacentHTML('beforeend', '<tr id="element' + number + '">' + numberInput + titleTd + deleteButton + '</tr>'); } 

Je veux créer une fonction (deleteElement) qui supprime cet élément ajouté onClick.

Après avoir supprimé un élément, je souhaite que cette fonction réorganise toutes les valeurs d'éléments et les ID . Par exemple, si je supprime le numéro d'élément 2, la valeur et l'ID du troisième élément doivent être 2.

Pas JQuery.

Aidez-moi à cela!

Vous allez construire un ensemble de tous les éléments impliqués. Supprimez de la cible à la fin. Supprimez la cible du tableau Renumérotation dans le tableau Ensuite, ajoutez ce qui reste. Si c'était moi, j'aimerais avoir un autre ElementID (DisplayElmentID?), Alors vous n'auriez pas à faire toutes ces choses. C'est-à-dire laisser l'adresse d'identification utilisée par le DOM

Merci @Esailija pour votre aide! Solution ( violon ):

 function addElement() { var elementsBody = document.getElementById('elementsBody'); var numberInput = '<td><input type="hidden" name="numbers[]" value="" /></td>'; var titleTd = '<td><input type="text" name="titles[]" /></td>'; var deleteButton = '<td><div onClick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); update();">Delete Element</div></td>'; elementsBody.insertAdjacentHTML('beforeend', '<tr>' + numberInput + titleTd + deleteButton + '</tr>'); update(); } function update() { var inputs = document.getElementById('elementsBody').querySelectorAll("input[type='text']"); [].forEach.call(inputs, function(input, index) { input.value = index + 1; }); } 
 <table> <tbody id="elementsBody"> <tr> <td> <input type="hidden" name="numbers[]" value="1" /> </td> <td> <input type="text" name="titles[]" /> </td> </tr> </tbody> </table><button onclick="addElement();">add</button>