事件 onclick 添加 table，但如果已经存在，则在再次单击时删除

Question

我有一些输入和一个 onclick 按钮，当单击该按钮时，它会将输入的值保存在 table 中，但如果再次单击它，它会在 table 下面创建另一个 table年长的。每次我创建一个新的时，我都想删除旧的 table。

这是html

<p id="todaInfo"></p>
  <div class="container" id="preguntas">        
      <br>
      <br>
      <h3>Ingresa tus datos para iniciar una cotizacion</h3>
      <table class="table table-striped">    
      <thead>
          <input type="text" id="nombre" class="no-outline" placeholder="Nombre">
          <input type="number" id="edad" class="no-outline" placeholder="Edad">
          <input type="email" id="email" class="no-outline" placeholder="Email">
          <input type="tel" id="telefono" class="no-outline" placeholder="Telefono">
          <div>
            <button onclick="Guardar()" id="guardado">Guardar</button>
          </div>
      </thead>
      <tbody id="info" class="shadow">          
      </tbody>
      </table>
  </div>

这是javascript

function Guardar() {
    datosJSON.nombre = document.getElementById('nombre').value;
    datosJSON.edad = document.getElementById('edad').value;
    datosJSON.email = document.getElementById('email').value;
    datosJSON.telefono = document.getElementById('telefono').value;
    localStorage.setItem('datosSolictante', JSON.stringify(datosJSON));
} // Cierre funcion guardar


function checkData() {
    console.log(todaInfo);
    console.log(((nombre.value) && (edad.value) && (email.value) && (telefono.value)));
    if ((nombre.value) && (edad.value) && (email.value) && (telefono.value)) {
    console.log(todaInfo);
    todaInfo.innerHTML = ` ${nombre.value} ${edad.value} ${email.value} ${telefono.value}  `;
}} // Cierre funcion checkData

window.onload = function() {
    let todaInfo = document.getElementById('todaInfo');
    let info = document.getElementById('info');
    console.log(todaInfo);
    console.log(info);
    todaInfo.innerHTML = '';
    var guardado = document.getElementById('guardado');
    guardado.addEventListener("click", function () {
    if (checkData) {
        guardado.innerHTML = `Guardado`;
    }
});
};

guardado.addEventListener("click", function() {
    if ((nombre.value.length > 0) && (edad.value.length > 0) && (email.value.length > 0) && (telefono.value.length > 0)) {
        info.innerHTML += "<th>Informacion del cliente</th><tr><td>Nombre: " + nombre.value + "</tr></td><tr><td>Edad: " + edad.value + "</tr></td><tr><td>Email: " + email.value + "</tr></td><tr><td>Telefono: " + telefono.value + "</td></tr>"; 
    }
    nombre.value = "";
    edad.value = "";
    email.value = "";
    telefono.value = "";
});

Answer 1

您只需设置 info.innerHTML。当前，您每次单击按钮时都会添加到 innerHTML。

if ((nombre.value.length > 0) && (edad.value.length > 0) && (email.value.length > 0) && (telefono.value.length > 0)) {
    info.innerHTML = "<th>Informacion del cliente</th><tr><td>Nombre: " + nombre.value + "</tr></td><tr><td>Edad: " + edad.value + "</tr></td><tr><td>Email: " + email.value + "</tr></td><tr><td>Telefono: " + telefono.value + "</td></tr>"; 
}

事件 onclick 添加 table，但如果已经存在，则在再次单击时删除

event onclick add table, but if already exits remove when click again

html

javascript

onclick