Я неоднократно тестировал код, чтобы найти проблему и найти ее и решение, но эта часть ошибки необходима, чтобы она не была уродливой, например, кнопка была бы рядом друг с другом или ниже друг друга, поэтому я использую <br> чтобы разделить их, но кажется, что когда я удаляю этот элемент, он не удаляет часть <br>.
Я решаю ее, добавляя класс к <br class='br'> и затем $ (". br") .remove ();
Просто оставлю это здесь, чтобы кто-нибудь либо исправил меня, либо предложил лучший способ сделать это, либо использовал это как решение своей проблемы.
https://jsfiddle.net/Necrorifter/k0yvsbj9/64/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="placeholder"></div>
<br>
<div id="placeholder_choice"></div>
</body>
</html>
function startGame() {
$(document).ready(function() {
Intro();
});
$(document).on("click", ".OnOff", function() {
var button = $(this).val();
if (button == "Next") {
Conclusion();
} else if (button == "Back") {
Intro();
}
});
function Intro() {
$("#Intro").remove();
$("#Conclusion").remove();
$(".OnOff").remove();
$(".br").remove();
$("<div id='Intro'>" + "<p>Hello, welcome to my game!</p>" + "</div>").insertBefore("#placeholder").fadeIn(0);
$("<button class='OnOff' value='Next'>Okay (Next)</button>").insertBefore("#placeholder_choice");
}
function Conclusion() {
$("#Intro").remove();
$("#Conclusion").remove();
$(".OnOff").remove();
$(".br").remove();
$("<p id='Conclusion'>Yay, i like this boring ass test! Let do it again!</p>").insertBefore("#placeholder");
$("<button class='OnOff' value='Back'>Okay (Back)</button>").insertBefore("#placeholder_choice");
$("<br class='br'><br class='br'><button class='OnOff' value='Middle'>Empty (Middle)</button>").insertBefore("#placeholder_choice");
}
}
startGame();