How to dynamically add and remove html elements in javascript or Jquery

I have a dropdown menu with details. If a person clicks on another button to say they do not have a spouse, then I want to remove the items in the dropdown for the spouse. When the user clicks on the spouse button I either add or remove the items to/from the dropdown.

 <div class="centred">
        <button class="dropdown-toggle form-button" data-bs-toggle="dropdown" id="details-button">Details
        </button>
        <div class="dropdown-menu" id="details-dropdown-menu">
            <a class="dropdown-item" id="your-details-tab" href="#">Your Details</a>
            <a class="dropdown-item" id="spouse-details-tab" href="#">Spouse Details</a>
            <a class="dropdown-item" id="your-superannuation-tab" href="#">Your Superannuation</a>
            <a class="dropdown-item" id="spouse-superannuation-tab" href="#">Spouse Superannuation</a>
            <a class="dropdown-item" id="your-super-returns-tab" href="#">Your Super Returns</a>
            <a class="dropdown-item" id="spouse-super-returns-tab" href="#">Spouse Super Returns</a>
            <a class="dropdown-item" id="your-income-tab" href="#">Your Income</a>
            <a class="dropdown-item" id="spouse-income-tab" href="#">Spouse Income</a>
            <a class="dropdown-item" id="assets-tab" href="#">Assets</a>
            <a class="dropdown-item" id="property-investments-tab" href="#">Property Investments</a>
            <a class="dropdown-item" id="desired-income-tab" href="#">Desired Income</a>
            <a class="dropdown-item" id="inflation-rates-tab" href="#">Inflation Rates</a>
            <a class="dropdown-item" id="lump-sum-additions-tab" href="#">Lump Sum Additions</a>
            <a class="dropdown-item last-nav-link" id="lump-sum-withdrawals-tab" href="#">Lump Sum
                Withdrawals</a>
            <div class="clear"></div>
        </div>
        <button class="result-button form-button" id="result-button">Result</button>
    </div>

When the user clicks on the button to say they are single I call the following:

function disableSpouseButtons() {
    let dropdown = document.getElementById("details-dropdown-menu");

    dropdown.removeChild(document.getElementById("spouse-details-tab"));
    dropdown.removeChild(document.getElementById('spouse-superannuation-tab'));
    dropdown.removeChild(document.getElementById('spouse-super-returns-tab'));
    dropdown.removeChild(document.getElementById('spouse-income-tab'));
}

When the user user clicks on the button to say they have a spouse, I recreate the items in the dropdown.

unction enableSpouseButtons() {
    enableTab('spouse-details-tab', "Spouse Details", $("#spouse-details-form"), 1);
    enableTab('spouse-superannuation-tab', "Spouse Superannuation", $("#spouse-superannuation-form"), 3);
    enableTab('spouse-super-returns-tab', "Spouse Super Returns", $("#spouse-super-returns-form"), 5);
    enableTab('spouse-income-tab', "Spouse Income", $("#spouse-income-form"), 7);
}

function enableTab(idName, tabName, formElement, index) {
    let dropdownDiv = document.getElementById("details-dropdown-menu");
    let z = document.createElement('a')
    z.id = idName;
    z.innerHTML = tabName;
    z.classList.add('dropdown-item');
    z.classList.add('pointer-allowed');
    z.addEventListener('click', function() {
        scrollToElement(formElement);
    });
    dropdownDiv.insertBefore(z, dropdownDiv.children[index]);
}

The problem is when the items get removed I get the following error:

Uncaught TypeError: Failed to execute ‘removeChild’ on ‘Node’: parameter 1 is not of type ‘Node’.

This does not appear when the user toggles the button to say if they are single or not but when they leave the form and return to it. The code checks if the person is single and then removes the items from the dropdown. It displays the error but from then on seems to work correctly.

I have a method that gets called if the user clicks on the button to say they are single.

function setIsSingle() {
    isSingleButton.addClass("active");
    notSingleButton.removeClass("active");
    $("#spouse-details-form").hide();

    if (yesHomeOwnerButton.hasClass("active")) {
        disableYesNoButtons(yesSingleAndSharingButton, noSingleAndSharingButton)
    }else {
        enableYesNoButtons(yesSingleAndSharingButton, noSingleAndSharingButton)
    }
    $("#spouse-date-of-birth").val("");
    spouseRetiredClicked();
    deleteSpouseWithdrawals();
    disableSpouseButtons();
}

The last call to disableSpouseButtons() is the function that removes the items from the dropdown. The same function setIsSingle() gets called after the user leaves the from then returns to it. I check if the saved object has single set to true and if so call setIsSingle(). That’s when I get the error.

What am I doing wrong?

I now realise what I was doing wrong. When the user clicked on "yes" they were single the spouse elements were removed from the dropdown. If the user then went to another form (exited the form) and returned to it, then it would do an update, which would set the single status and remove the spouse elements. But at this point they had already been removed and so did not exist. The solution was to check for existence before removing.

function disableSpouseButtons() {
    let dropdown = document.getElementById("details-dropdown-menu");

    if (document.getElementById("spouse-details-tab") !== null) {
        dropdown.removeChild(document.getElementById("spouse-details-tab"));
    }
    if (document.getElementById('spouse-superannuation-tab') !== null) {
        dropdown.removeChild(document.getElementById('spouse-superannuation-tab'));
    }

    if (document.getElementById('spouse-super-returns-tab') !== null) {
        dropdown.removeChild(document.getElementById('spouse-super-returns-tab'));
    }
    if (document.getElementById('spouse-income-tab') !== null) {
        dropdown.removeChild(document.getElementById('spouse-income-tab'));
    }
}