How to dynamically set the form label after Deleting any One form-CodePudding

If I delete the form1, then form2, form3, form4 label automatically have to change in to form1, form2, form3 like vice, If I delete form form2 then form3, form4 label have to change in to form2, form3.

function delete1(){
(document.getElementById('form1').style.display = 'none')
}

function delete2(){
(document.getElementById('form2').style.display = 'none')
}

function delete3(){
(document.getElementById('form3').style.display = 'none')
}

function delete4(){
(document.getElementById('form4').style.display = 'none')
}

<div id="form1">
<label >form 1</label>
<button onclick="delete1()">Delete</button>
</div>
<div id="form2">
<label >form 2</label>
<button onclick="delete2()">Delete</button>
</div>
<div id="form3">
<label >form 3</label>
<button onclick="delete3()">Delete</button>
</div>
<div id="form4">
<label >form 4</label>
<button onclick="delete4()">Delete</button>
</div>

CodePudding user response：

Hope below code helps you

function delete1(){
(document.getElementById('form1').style.display = 'none')
resetName()
}

function delete2(){
(document.getElementById('form2').style.display = 'none')
resetName()
}

function delete3(){
(document.getElementById('form3').style.display = 'none')
resetName()
}

function delete4(){
(document.getElementById('form4').style.display = 'none')
resetName()
}
function resetName() {
var div_list = document.querySelectorAll('.form'); 
var div_array = [...div_list]; // converts NodeList to Array
div_array.filter(d=>d.style.display != 'none').forEach((div,i) => {

div.querySelector("label").innerText = "form "   (i 1)
});
}

<div id="form1" >
<label >form 1</label>
<button onclick="delete1()">Delete</button>
</div>
<div id="form2" >
<label >form 2</label>
<button onclick="delete2()">Delete</button>
</div>
<div id="form3" >
<label >form 3</label>
<button onclick="delete3()">Delete</button>
</div>
<div id="form4" >
<label >form 4</label>
<button onclick="delete4()">Delete</button>
</div>

CodePudding user response：

In your js file, loop through all the forms, check if display != 'none', subsequently changing the innerHTML of your form text and the id of your form to the specific index or formatted string.