Remove Id when click and Add when close

Question

I’m having a problem at the time of remove a specific id, When I click on the Button continue reading. I created Btn event, Inside I’m passing the parent parameter and trying to remove the child with the method 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>
                            Um pouco mais sobre os meus trabalhos desenvolvido, desde
                            um design até uma aplicação para Web
                        </article>
                        <input type="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 I’m editing more her Class has the name of modPrincipal