Question 36881 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to dynamically set the form label after Deleting any One form – Jquery

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 class="class1">form 1</label>
<button onclick="delete1()">Delete</button>
</div>
<div id="form2">
<label class="class2">form 2</label>
<button onclick="delete2()">Delete</button>
</div>
<div id="form3">
<label class="class3">form 3</label>
<button onclick="delete3()">Delete</button>
</div>
<div id="form4">
<label class="class4">form 4</label>
<button onclick="delete4()">Delete</button>
</div>
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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" class="form">
<label class="class1">form 1</label>
<button onclick="delete1()">Delete</button>
</div>
<div id="form2" class="form">
<label class="class2">form 2</label>
<button onclick="delete2()">Delete</button>
</div>
<div id="form3" class="form">
<label class="class3">form 3</label>
<button onclick="delete3()">Delete</button>
</div>
<div id="form4" class="form">
<label class="class4">form 4</label>
<button onclick="delete4()">Delete</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search