更改 Select 上的内容 选项更改 - Javascript

Question

I have a class for selecting a Form depending on the chosen value from Select. I have a problem that, when I choose an option I see the desired form, but when I choose another option I have already two forms one under another, and when I choose the third option, I have all three forms together. What I need, that when changing the option, forms are changed as well.

Here is my code of class select:

export default class FormSelect {
    constructor() {
        this.self = document.createElement('div');
        this.select = new SelectDoctor(["Cardiologist", "Dentist", "Therapist"], "doctor", "Choose doctor:").create();
    }

    render(modal) {
        this.self.append(this.select);
        modal.append(this.self);
        this.select.addEventListener("change", () => {
           const value = this.select.value;
            this.chooseDoctor(value);
        });
    }

    chooseDoctor(value) {
        const modal = document.querySelector('.modal-2')
        const cardio = new FormCardiologist();
        const dentist = new FormDentist();
        const therapist = new FormTherapist();

        if (value === "Cardiologist") {
           cardio.render(modal);
          
        } else if (value === "Dentist") {
            dentist.render(modal);
        } else if (value === "Therapist") {
            therapist.render(modal);
        }
    }
}

This is the method of main Form class:

render(modal) {
        this.self.append(this.fullName, this.purpose, this.desc, this.priority, this.status, this.submit);
        modal.append(this.self);
    }

Answer 1

I achieved it by creating separate div element with class for forms, then on each change I clear innerHTML = "".

switch (value) {
            case "Cardiologist":
                modal.innerHTML = "";
                cardio.render(modal);
                break;
            case "Dentist":
                modal.innerHTML = "";
                dentist.render(modal);
                break;
            case "Therapist":
                modal.innerHTML = "";
                therapist.render(modal);
                break;
        }