diff --git a/src/main/resources/static/js/skills/skillSelector.js b/src/main/resources/static/js/skills/skillSelector.js index 493cec1..247f65b 100644 --- a/src/main/resources/static/js/skills/skillSelector.js +++ b/src/main/resources/static/js/skills/skillSelector.js @@ -113,16 +113,6 @@ function addSkillSelector() { // Delete the existing options and set it to the default value rebuildOptions(); - // Update the visibility of the "Entfernen" buttons - updateRemoveButtonsVisibility(); - - // Append the new skill selector to the container - const container = document.querySelector(".skill-selectors"); - container.appendChild(newSkillSelector); - - // Initialize star rating components for the new skill selector - initializeStarRatingComponents(); - // Add event listener to the new "Entfernen" button newSkillSelector .querySelector(".btn-default") @@ -130,6 +120,15 @@ function addSkillSelector() { event.preventDefault(); handleRemoveSkillButtonClick(this); }); + + // Append the new skill selector to the container + skillSelectorList.appendChild(newSkillSelector); + + // Initialize star rating components for the new skill selector + initializeStarRatingComponents(); + + // Update the visibility of the "Entfernen" buttons + updateRemoveButtonsVisibility(); } //==================================================================================== @@ -140,17 +139,13 @@ function updateRemoveButtonsVisibility() { const skillSelectors = document.querySelectorAll(".skill-selector"); const removeButtons = document.querySelectorAll(".btn-default"); - // Show "Entfernen" buttons only if there are at least two skill selectors if (skillSelectors.length > 1) { removeButtons.forEach((button) => { const selectElement = button .closest(".skill-selector") - .querySelector("#secondarySkill"); - if (selectElement.value) { - button.style.display = "inline-block"; - } else { - button.style.display = "none"; - } + ?.querySelector("#secondarySkill"); + button.style.display = + selectElement && selectElement.value ? "inline-block" : "none"; }); } else { removeButtons.forEach((button) => { @@ -169,7 +164,13 @@ function handleRemoveSkillButtonClick(button) { skillSelector.remove(); // If there is no slector with an empty value left we need to add one - addSkillSelector(); + if ( + document.querySelectorAll("#secondarySkill option[value='']").length === 0 + ) { + addSkillSelector(); + } else { + rebuildOptions(); + } } //====================================================================================