I'm having a problem when I remove a specific Id , when I click the continue reading button. I created btn event, Inside I'm passing the parent parameter and trying to remove the child with the removeChild Follow the code below.
let btnLendo = document.getElementById('btn-2');
let mod = document.querySelector('.modPrincipal');
btnLendo.addEventListener('click', e=>{
mod.removeChild(document.getElementById('modPrincipal1'))
})
#modPrincipal1{
display:none;
}
.cont-card{
margin-top: 20px;
background: #E1C8A7;
border-radius: 5px;
padding:30px;
}
.cont-card img{
margin:auto;
display: block;
margin-bottom: 20px;
}
.cont-card h6{
text-align: center;
font-size: 1.3em;
letter-spacing: 3px;
font-weight: 300;
margin-bottom: 30px;
}
.cont-card>article{
text-align: center;
font-size: 0.9em;
font-weight: 400;
letter-spacing: 1px;
margin-bottom: 20px;
}
.cont-card>.btn{
margin:auto;
display:block;
}
.btn{
margin-left:0.1em;
background: #3F4A54;
color:white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cont-card col-sm-12">
<img class="img-card" src="https://png.icons8.com/ios/90/000000/code-filled.png"/><h6>Trabalhos</h6><article>Umpoucomaissobreosmeustrabalhosdesenvolvido,desdeumdesignatéumaaplicaçãoparaWeb</article><inputtype="button" class="btn" id="btn-2" value="Continue Lendo">
<div class="modPrincipal container" >
<div class="modContainer col-sm-12 col-md-12 col-lg-12" id="modPrincipal1" >
<div class="modContTopo col-sm-12">
<h6>Olá modal Texto </h6>
<p id="close">X</p>
</div>
<div class="form-group modContChoise col-sm-12 col-md-12 col-lg-12">
<select class="form-control">
<option value="1" selected>Opção da modal</option>
</select>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 modContText">
<article id="select1">
texto padrao para a entra.
</article>
</div>
<div class="">
<input type="button" class="btn" value="Fechar">
</div>
</div>
</div>
</div>
I want to call my Modal that I'm editing more of Class of her. modPrincipal name