img and span tags disappear when I change the input that after I created edit method ;

Question

class ListaConvidados {

   constructor() {// iniciando uma contagem
      this.qtd = 0;
      this.id = 0;
      this.edit = "";
      this.editID = 0
   }

   add() {// criando metodo  adicionar 
      // 1) ler o input do DOM[tela]
      let nome = document.getElementById("nomeConvidado").value;

      if (this.edit == true) {
         document.getElementById(this.editID).innerText = nome;
         this.edit = false;
      } else {
         // criando condições no Dom[tela]
         if (nome == "") {
            alert("DIGITE NOME DO CONVIDADO !!!!");

            this.qtd--;
         }



         else if (this.qtd == 0) {
            alert("adicionando primeiro convidado desta lista");

         }
         else if (this.qtd == 10) {
            alert(" LIMITE MAXIMO DE CONVIDADOS!!\n autorizado apenas 10 convidados neste evento.");
            this.qtd--;
         }

         // 2) ler a lista no Dom[tela]
         let lista = document.getElementById("lista");

         // 2.1 criar elemento no DOM[tela]
         let div = document.createElement("div");// criando uma tag  via JS >>  <di></div> no DOM[tela]
         div.classList.add("itemLista");// inserindo uma class no  div>>  <div class="itemlista"></div>
         div.id = "conv-" + this.id;

         let span = document.createElement("span");// criando uma <span></span> no DOM[tela]
         span.innerText = nome;// inserindo nome no <span>exemplo: Jão da silva</span>

         let imgDel = document.createElement("img");//criando uma <img> no DOM[tela]
         imgDel.src = "../listaConvidados/img/trash.svg";// inserindo um atributo dentro da img src="../listaConvidados/img/trash.svg"

         let imgEdit = document.createElement("img");//criando uma <img> no DOM[tela]
         imgEdit.src = "../listaConvidados/img/edit.svg";// inserindo um atributo dentro da img src="../listaConvidados/img/edit.svg"

         //criando o onclick="lista.excluir(conv)"
         imgDel.setAttribute("onclick", "lista.excluir('" + div.id + "')");
         // criando o onclick="lista.editar ()"
         imgEdit.setAttribute("onclick", "lista.editar('" + div.id + "')");

         // 2.2/ aninhar as tags
         div.appendChild(span);// agrupando <div id="itemLista"><span>'nome'</span></div>
         div.appendChild(imgDel); // agrupando <div id="itemLista"><span> 'nome'</span> <img src=" img/trash.svg"
         div.appendChild(imgEdit); // agrupando <div id="itemLista"><span> 'nome'</span> <img src=" img/edit.svg"

         // 2.3) inserir na lista  do DOM[tela]
         lista.appendChild(div);

         // 3) criando o contador
         this.qtd++;
         this.id++;

         this.atualizarQtd();

      }

      document.getElementById("nomeConvidado").value = "";//limpando o input nome convidado


   }
   //  atualizar o contador qtd
   atualizarQtd() {
      let labelqtd = document.getElementById("labelqtd");
      labelqtd.innerText = this.qtd;
   }

   // criando metodo excluir da lista convidados
   excluir(id) {

      let conv = document.getElementById(id);// buscando o id do convidado no DOM[tela]

      let lis = document.getElementById("lista");//acessando a lista de convidado no DOM[tela]

      lis.removeChild(conv);//excluindo convidado pelo id

      this.qtd--;// criando contador em excluir

      this.atualizarQtd();

   }
   editar(id) {
      let nome = document.getElementById(id).childNodes[0].innerText;// acessando o 'id' e inserindo um texto
      document.getElementById("nomeConvidado").value = nome;//acessando o nomeCovidado[input]e colocando valor
      this.edit = true; //validando o botao add para modo editar
      this.editID = id;
   }
}
var lista = new ListaConvidados();/**criando um objeto 'ListaConvidados' em js */

body{
    font-family: Arial, Helvetica, sans-serif;
    color: #e4cbcb;
}


.card{
    background-color: white;
    width:30%;
    margin: auto;
    margin-bottom: 13px;
    border-radius: 15px;
    text-align: center;
    padding: 15px;
box-shadow: 0px 0px 10px  gray;
}
.cardTitle{
    font-weight: bold;
    text-align: center;
    color: gray;
}
.card-form input{
    width: 100%;
    border: none;
    border-bottom: 1px solid gray;
    font-size: 12px;
    padding: 10px 3px;
}
.card-acoes button{
    border:  none;
    font-weight:900;
    padding: 15px;
    font-size: 12px;
    margin: 20px 0px 0px 0px;
    color: gray;
    border: 1px solid gray;
    border-radius: 30px;
    cursor: pointer;
    transition: .3s;
}
.card-acoes button:hover{
    background-color: gray;
    color: white;
    font-weight: 700;
    box-shadow: 0px 2px 10px gray;   
}
#lbl{
    
  font-weight: bold;
  margin-top: -5px;
    float: left;
}
.itemLista{
    color: darkcyan;
    font-weight: 900;
    text-transform: uppercase;
    padding: 10px;
}
.itemLista:hover{
    
    background-color: yellowgreen;

}
.itemLista img {
    width: 20px;
    float: right;
}

<html>

<head>
<meta charset="utf-8">
<title>Lista De Convidados</title>
<script src="../listaConvidados/listaConvidado.js"></script><!--linkando o js para o html-->
<link rel="stylesheet" href="../listaConvidados/listaConvidados.css">
</head>

<body>

    <div class="card">
        <h2  class="cardTitle"> adicionar Convidados</h2>
        <div class="card-form">
            <input type="text" id="nomeConvidado" placeholder="nome do convidado">
        </div>
        <div class="card-acoes">
            <button onclick="lista.add()" id="botaoAdd">adicionar</button>
        </div>
    </div>

    <div class="card">
        <h2 class="cardTitle">Lista de Convidados</h2>
        <label id="lbl" for="">QTD:</label>
        <div id="labelqtd"><label id="labelqtd" ></label></div>
        
        <div id="lista"></div>
           
        
    </div>
    

</body>

</html>

Answer 1

To edit you recover the innerText of the span that contains the name and by changing you change the innerText of the div that contains the span and the images.

Just edit the div innerText by span:

if (this.edit === true) {
  document.getElementById(this.editID).childNodes[0].innerText = nome;
  this.edit = false;
}