How to clean results of an HTML Tag? Javascript

0

I have a function that when I hit an html button calls a function javascript to print the results in a table already created but empty, which in this case is called "selected table". How could I make it disappear when I play again? I understand about the onclick event and the remove child but I go crazy with javascript because the frontend is not my strong point.

I forgot to mention that I already finished the whole project without jquery, if it is possible I will continue like this, but I will see how I implement it.

function verEventos(){

var usuario= document.getElementById("usuario");
var pass= document.getElementById("pass");

var xmlhttp = new XMLHttpRequest();
var url= "/Proyecto_Final_AAB/rest/adminSeg/verEventos";

if(usuario=="" && pass==""){

    alert("Los campos 'usuario' y 'pass' no pueden quedar en blanco.")

    }
else
    {

        xmlhttp.onreadystatechange= function(){
            if(this.readyState==4 && this.status==200){


        //Creación de títulos
        //Elegimos el elemento donde Totos los 'td' van a ser adheridos
        var tablaElegida= document.getElementById("tablaElegida");

        var cabecera = ["-ID-", "nombre", "Fecha"];

        for( var i=0; i < cabecera.length; i++)
        {
                var tablaElegida= document.getElementById("tablaElegida");

                var crearTitulos=document.createElement("td");

                var textoNombre= document.createTextNode(cabecera[i]);

                crearTitulos.appendChild(textoNombre);

                tablaElegida.appendChild(crearTitulos).style.border = "solid yellow";
        }


                //Esta es la respuesta del servidor, sobre esta recaen todas las acciones.
                var datos= xmlhttp.responseText;

                //Parseamos los datos
                var parseDatos= JSON.parse(datos);


                //Iteramos sobre la respuesta del JSON
                for(var i=0; i < xmlhttp.responseText.length; i++){


                    //Creamos un renglon por cada elemento que iteramos
                        var hilera= document.createElement("tr");
                        var tablaElegida= document.getElementById("tablaElegida");
                            tablaElegida.appendChild(hilera);


                    //id_evento
                        //Creamos los td  que contendrán los resultados
                        var newtdId_evento= document.createElement("td");

                        //Adherimos los td a la tabla ya existente
                        tablaElegida.appendChild(newtdId_evento).style.border = "thin solid white";

                        //Creamos el texto y aherimos las columnas parseadas
                        var textoId_evento= document.createTextNode(parseDatos[i].id_evento);

                        //Adherimos el texto ya creado a los td
                        newtdId_evento.appendChild(textoId_evento);


                    //Nombre
                        //Creamos los td  que contendrán los resultados
                        var newtdNombre= document.createElement("td");

                        //Adherimos los td a la tabla ya existente
                        tablaElegida.appendChild(newtdNombre).style.border = "thin solid white";

                        //Creamos el texto y aherimos las columnas parseadas
                        var textoNombre= document.createTextNode(parseDatos[i].nombre);

                        //Adherimos el texto ya creado a los td
                        newtdNombre.appendChild(textoNombre);   


                    //Fecha
                        //Creamos los td  que contendrán los resultados
                        var newtdFecha= document.createElement("td");

                        //Adherimos los td a la tabla ya existente
                        tablaElegida.appendChild(newtdFecha).style.border = "thin solid white";

                        //Creamos el texto y aherimos las columnas parseadas
                        var textoFecha= document.createTextNode(parseDatos[i].fecha);

                        //Adherimos el texto ya creado a los td
                        newtdFecha.appendChild(textoFecha);
                    }
                }
            }
        }
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("usuario="+usuario.value+"&pass="+pass.value);
}

And this is the html, a part only because it's long:

<div id="resultados">
        <ul id="ulElegido">
            <table id="tablaElegida"></table>
        </ul>

</div>

here the button:

<table id="verTodosEventos">
    <tr>
        <td>
            <input type="button" value="Ver eventos" onclick="verEventos()">
        </td>
    </tr>
</table>

I had thought about changing the appendChild to the ul that is created and then removeChild, but I'm good to hear if there are more efficient solutions.

    
asked by berlot83 27.04.2017 в 19:33
source

2 answers

4

Use some method to select the element, such as getElementById and then innerHTML .

Example:

var resultados = document.getElementById('resultados');
var contenido = "Ponga aquí el contenido a agregar";

function llenar(){
  resultados.innerHTML = contenido;
}

function vaciar(){
  resultados.innerHTML = '';
}
<button onclick="llenar()">Llenar</button>
&nbsp;
<button onclick="vaciar()">Vaciar</button>
<div id="resultados"><div>
    
answered by 27.04.2017 / 19:55
source
1

To empty a content in a tag you can occupy the function .innerHTML in javascript, or .empty() in jquery.

HTML

<div id="resultados">
        <ul id="ulElegido">
            <table id="tablaElegida"></table>
        </ul>
</div>

Javascript example

function vaciar(){
  document.getElementById('resultados').innerHTML = '';
}

Jquery example

function vaciar(){
  $('#resultados').empty();
}

I hope it can be helpful: D

Complete example:

//JavaScript
function vaciar(){
  document.getElementById('resultados').innerHTML = '';
}
<!--HTML-->
<div id="resultados">
    <ul id="ulElegido">
      <table id="tablaElegida" border="1">
        <tr>
          <td>Campo1</td>
          <td>Campo2</td>
        </tr>
        <tr>
          <td>Campo3</td>
          <td>Campo4</td>
        </tr>
      </table>
    </ul>
</div>
<div>
  <button onclick="vaciar()">Vaciar</button>
</div>
    
answered by 27.04.2017 в 20:10