Borrar contenido de capa en Javascript

Si estás trabajando con aplicaciones del tipo SPA (Single Page Application) es fácil que se te de la situación en la cual tengas que borrar el contenido de una capa para cargar otro nuevo contenido. En este ejemplo vamos a ver cómo podemos borrar contenido de capa en Javascript.

Lo primero que vamos a realizar es crear una capa que tenga contenido.

<div id="micapa">Contenido de mi capa...
<img src="logo.png" />
Fin del contenido de mi capa</div>

En este caso hemos insertado contenido de tipo texto e imágenes. Pero podríamos tener dentro de la capa cualquier tipo de información: tablas, formularios,…

Es importante ver que la capa tiene un identificador único y que todo lo que hagamos para manipularla será a través de dicho ID.

Lo siguiente que vamos a hacer es crear un botón, el cual nos va a servir para simular la acción que nos permita borrar contenido de capa en Javascript.

<button id="eliminar">Eliminar Contendio</button>

Ahora vamos a controlar que cuando el usuario pulse sobre el botón se ejecute el efecto. Para ello vamos a utilizar el método .addEventListener(), con el que controlaremos el "click"

var boton = document.getElementById("eliminar");
boton.addEventListener("click", function() {...},false);

Cuando pulsemos sobre el botón vamos a borrar contenido de capa en Javascript. El borrado de la capa se consigue simplemente asignando al atributo .innerHTML un contenido vacío:

document.getElementById("micapa").innerHTML = '';

Así el código final es muy sencillo y nos queda de la siguiente forma:

var boton = document.getElementById("eliminar");
boton.addEventListener("click", function() {
  document.getElementById("micapa").innerHTML = '';
},false);

Y así habremos conseguido borrar contenido de capa en Javascript.

Twittear

Compartir5

5 Compartir