Podmianka kodu w html za pomocą js

pytanie zadane 2 marca 2023 w JavaScript przez Mateusz Analityk Stary wyjadacz (13,710 p.)
edycja 3 marca 2023 przez Comandeer

function remove_content_login() {

    const content_login = document.querySelector('.content-login');

    content_login.remove();

}

actionButtonX.addEventListener("click", (body) => {

    remove_content_login();

    console.log("Okienko usunięte");

});

Po dodaniu diva z zawartością document.querySelector('.content-login');

Funkcja nie chce się uruchomić jeszcze raz, aby z powrotem element usunąć ze strony, element da się usunąć tylko raz.

W taki sposób tworzę usuwany element i dodaję z powrotem do strony we właściwe miejsce, a potem nie da się go usunąć, po kliknięciu na ten sam przycisk, który usuwał go za pierwszym razem, tzw. chciałbym wywołać znowu funkcję, która jest na górze, a się nie wywołuje.

 const create_element_div = document.createElement("div");

    create_element_div.className = ("content-login");

    create_element_div.innerHTML = content_login();

    div_main = document.getElementsByClassName('content-main');

    div_main[0].appendChild(create_element_div);

W jaki sposób to zrobić, aby funkcja usuń działała zawsze?

Aplikacja działa na zasadzie okienek, stare okienko da się usunąć, ale nowo dodanego już nie. Funkcja dodająca okienko działa zawsze. ale remove wykonuje się tylko raz.

komentarz 3 marca 2023 przez Comandeer Guru (601,450 p.)

Proszę umieszczać kod w przeznaczonym do tego bloczku.

1 odpowiedź

odpowiedź 3 marca 2023 przez SamFlynn Początkujący (300 p.)

W sumie wszystko powinno działać, od strony logicznej wszystko jest okej, nawet sobie na szybko przepisałem do VS Code i mi działało, może to ci coś pomoże.

<body >
	<button id="mbtn">clickme</button>

	<div class="content-main">
		<div class="content-login">TEST-original</div>
	</div>

	<script src="script.js"></script>
</body>

function remove_content_login() {
	const content_login = document.querySelector('.content-login');
	content_login.remove();
}

document.getElementById("mbtn").addEventListener("click", (event) => {
    remove_content_login();
    console.log("Okienko usunięte");
});

function content_login() {
	return "test"
}

function create_content_login(params) {
	const create_element_div = document.createElement("div");
	create_element_div.className = ("content-login");
	create_element_div.innerHTML = content_login();
	div_main = document.getElementsByClassName('content-main');
	div_main[0].appendChild(create_element_div);
}

komentarz 12 marca 2023 przez Mateusz Analityk Stary wyjadacz (13,710 p.)

Jeśli X, na który reaguje powyższa funkcja JS znajduje się na stałe na stronie ta logika działa

Jeśli inną funkcją doda się X do strony, a potem go usunie, a potem znowu doda, ta logika zawodzi, gdyż ta funkcja JS nie potrafi jeszcze raz zamknąć tego okienka, robi to tylko raz

https://mateusz-kacpura.github.io/w-asny-formularz-logowania/

Chodziło mi o ustawienie Tego X na okienku i usuwanie go razem z okienkiem