57 lines
2.0 KiB
JavaScript
57 lines
2.0 KiB
JavaScript
//---------------ADD AND REMOVE SECTION BASED ON ACTION DROPDOWN--------------------//
|
|
|
|
// Add event listeners to dynamically add/remove sections
|
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
// Add section for dropdown1-container
|
|
document.querySelector(".dropdown1-container .add").addEventListener("click", function() {
|
|
addSection('dropdown1-container');
|
|
});
|
|
|
|
// Remove section for dropdown1-container
|
|
document.querySelector(".dropdown1-container .remove").addEventListener("click", function() {
|
|
removeSection('dropdown1-container');
|
|
});
|
|
|
|
// Add section for dropdown2-container
|
|
document.querySelector(".dropdown2-container .add").addEventListener("click", function() {
|
|
addSection('dropdown2-container');
|
|
});
|
|
|
|
// Remove section for dropdown2-container
|
|
document.querySelector(".dropdown2-container .remove").addEventListener("click", function() {
|
|
removeSection('dropdown2-container');
|
|
});
|
|
});
|
|
|
|
// Function to add a section
|
|
function addSection(containerClass) {
|
|
// Get the container
|
|
const container = document.querySelector(`.${containerClass}`);
|
|
|
|
// Clone the first section of the container
|
|
const newSection = container.cloneNode(true);
|
|
|
|
// Remove the event listeners on the cloned section (optional)
|
|
newSection.querySelector('.add').removeEventListener('click', addSection);
|
|
newSection.querySelector('.remove').removeEventListener('click', removeSection);
|
|
|
|
// Reset values of the cloned inputs if necessary
|
|
const inputs = newSection.querySelectorAll('input, select');
|
|
inputs.forEach(input => input.value = '');
|
|
|
|
// Append the cloned section to the parent
|
|
container.parentNode.appendChild(newSection);
|
|
}
|
|
|
|
// Function to remove a section
|
|
function removeSection(containerClass) {
|
|
// Get all sections of the specific container
|
|
const sections = document.querySelectorAll(`.${containerClass}`);
|
|
|
|
// Only remove if there is more than one section
|
|
if (sections.length > 1) {
|
|
sections[sections.length - 1].remove();
|
|
}
|
|
}
|