Borrar contenido de capa en Javascript

18/Mar/2016 JavaScript , , , Deja un comentario

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.

  1. <div id="micapa">Contenido de mi capa...
  2. <br/>
  3. <img src="logo.png"/>
  4. <br/>
  5. Fin del contenido de mi capa
  6. </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.

  1. <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"

  1. var boton = document.getElementById("eliminar");
  2. 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:

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

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

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

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

Vídeos sobre Javascript


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*