Adicionar / Remover campos dinamicamente

Como adicionar e remover dinamicamente um elemento HTML a partir de um input? (Javascript puro)

by Rodrigo Portillo

HTML

<div class="dependentes">
  <button id="btnAdicionarDependentes">
  đź“ťAdicionar Dependentes
  </button>
  <div class="container" id="dependentesContainer">
  </div>
  <button class="green" id="btnCapturarDados">
  âś… Capturar Dados
  </button>
</div>
<pre id="containerDados">
  
</pre>

CSS

body{
  font-family: sans-serif;  
}

.dependentes{
  padding: 1rem;
  border: 1px solid #ccc;
}

.dependentes button{
  border: none;
  background-color: #5eb2e6;
  color: white;
  border-radius: 3px;
  text-transform: uppercase;
  padding: .75rem 1rem;
}
.dependentes button.green{
  background-color: #005c54;
  margin-top: 2rem;
}

.dependentes .container{
  margin-top: 1rem;
  display: grid;
  grid-gap: .5rem;
}

.dependentes .container input{
  padding: .5rem .75rem;
  border: 1px solid #ccc;
}

.dependentes .container input:focus{
  border: 1px solid black;
  outline: none;
}

.dependentes .container .dependente{
  display: grid;
  grid-gap: .5rem;
  grid-template-columns: 33% 33% 33%;
}

.dependentes .container .dependente .action a{
  text-transform: uppercase;
  text-decoration: none;
  padding: .5rem .75rem;
  display: inline-block;
}

.dependentes .container .dependente .action a.salvar{
  border-radius: 2px;
  background-color: #efefef;
  color: #005c54;
}

.disabled{
  pointer-events: none;
  opacity: .5;
  filter: grayscale(100%);
}

JavaScript

var dependentes = [{
	identificador: 13,
  nome: "Joana da Silva",
  idade: 12,
}];


function carregarDependentes(){
	let dependentes_container = document.querySelector("#dependentesContainer");
  		dependentes_container.innerHTML = "";
  dependentes.forEach((el)=>{
  	let identificador = el.identificador;
  	let nome = el.nome;
    let idade = el.idade;
    let dependente_container = `<div class="dependente" data-id="${identificador}">
    															<input class="nome" placeholder="Digite o nome" type="text" value="${nome}"/>
                                  <input class="idade" placeholder="Digite a idade" type="number" value="${idade}"/>
                                  <div class="action">
                                  	<a href="#" class="salvar">salvar đź’ľ</a>
                                    <a href="#" class="remover">❌</a>
																	</div>
															  </div>`;
  	dependentes_container.innerHTML += dependente_container;
  });
  salvarDependentes();
  removerDependentes();
  travarOutros(false);
}

function removerDependentes(){
	document.querySelectorAll("#dependentesContainer .remover").forEach((el, i)=>{
  	el.addEventListener("click", ()=>{
  		dependentes.splice(i, 1);  	
      carregarDependentes();
    });
  });
}

function adicionarDependentes(){
  dependentes.push({identificador:"", nome:"", idade: ""});
  carregarDependentes();
  travarOutros(document.querySelector("#dependentesContainer > div:last-child"));
}

function salvarDependentes(){
		document.querySelectorAll("#dependentesContainer .salvar").forEach((el, i)=>{
  	el.addEventListener("click", ()=>{
      let identificador = el.parentElement.parentElement.getAttribute("data-id");
      let nome = el.parentElement.parentElement.querySelector(".nome").value;
      let idade = el.parentElement.parentElement.querySelector(".idade").value;
    	
      if(!nome.length || !idade.length){
      	alert("Nome e idade precisam ser preenchidos para salvar.");
        return...