CODEWITHSUNDEEP
javascript
Carmavals
Carmavals

Reputation: 21

How to erase nodes by document.removeChild()

I dont know if my syntax is correct, but my console keeps telling me that the node i am selecting is not a child of the its parent. What I am trying to do is that as soon as the alert is accepted the button participante 1 and also participante 2 get remove and so I could add other buttons later.

var section = document.querySelector('seccion');
var container = document.querySelector('container');

var optionButtons = document.querySelector('option-buttons')
var participanteUno = document.getElementById('participante1')
var participanteDos = document.getElementById('participante2');
var historiaLevelUno = 0
var historiaLevelDOs = 0


var historia1 = function() {
    var esteban = ['texto 1', 'texto 2', 'texto 3', 'texto 4', 'texto 5', 'texto 6', 'texto 7', 'texto 8', 'texto 9', 'texto 10', 'texto 11', 'texto 12', 'texto 13', 'texto 14', 'texto 15']
    alert('has recibido un nuevo correo, ¿deseas leerlo?')
    var base1 = document.getElementById('base');
    if(historiaLevelUno == 0) {
    base1.innerHTML = '<p> el correo</p>'
}
let divBotonoes = document.getElementById('option-buttons')
let divBotones_nested = document.getElementById('participante1')
let borrarP = document.removeChild(divBotones_nested)
    
}
var esteban1 = participanteUno.addEventListener('click', historia1, true);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>text Adventure</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DotGothic16&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> 
<link href="style.css" rel="stylesheet">
<section>
    <head>
    <div id="titulo">
        <h1>Nombre de la obra</h1>
    </div>
</head>
</section>  
</head>
<body>
    <section id="seccion">    
    <div class="container">
        <div id="base">
            <p id="text">Intrucciones: <br> Estás entrando a una obra que requiere de toda tu atención, ya que serás parte de la historia. Para adentrarte a ella deberás hacer uso del botón 'Siguiente' que te mostrará las indicaciones y te ayudará a seguir con la historia. Además, podrás observar el botón 'Terminar juego'; al presionarlo podrás salir de este. Te recomendamos que lo uses en caso de  una emergencias (aburrimiento, fatiga, etc.) siempre y cuando hayas acordado con el participante frente a ti previamenente. <br> Lo primero que deberás hacer es escoger qué participante quisieras interpretar (acuerdalo con la persona frente a tí). Una vez hecho esto, presiona el participante que escogiste y podrás empezar con la historia. <br> Ahora sí, que comience la función... </p>
        </div>
        <div id="option-buttons" class="btn-grid">
        <button id='participante1' class="btn">Participante 1</button>  
        <button id='participante2' class="btn">Participante 2</button>            
        </div>
    </section>    
    <script type='text/javascript' src="app.js"></script>
    
</body>
</html>

Upvotes: 0

Views: 37

Answers (1)

Cameron R.
Cameron R.

Reputation: 58

removeChild() operates on the element you invoke it on, so document.removeChild(...) attempts to remove a direct child of the document. In order to remove your buttons, you have to run removeChild() on their parents.

Upvotes: 2

Related Questions