El ejercicio del frontend tiene dos partes importantes: un código HTML y CSS, responsable de crear elementos y estilizarlos, y un JavaScript responsable de ejecutar acciones sobre los elementos. En este post, te enseñaremos cómo eliminar una alerta con click en frontend JavaScript.
¿Qué haremos en este post?
Cuando hablamos de eliminar una alerta con click en frontend JavaScript nos referimos a programar la lógica para hacer que un anuncio personalizado se cierre. Puedes encontrar un ejemplo de este comportamiento en la sección de message en la documentación de buefy.org. Es decir, queremos hacer que el botón de cierre de una alerta como la siguiente nos permita eliminar el recuadro de la alerta programada.
Para entender el punto en el que está nuestro código antes de aprender cómo eliminar una alerta con click en frontend JavaScript, puedes leer nuestro post sobre crear un elemento personalizado en frontend. El resultado de ese código es un elemento de interfaz simple como el siguiente:
¿Cómo eliminar una alerta con click en frontend JavaScript?
Lo primero que debemos hacer para eliminar una alerta con click en frontend JavaScript es determinar qué elemento de nuestro proyecto es el encargado de gestionar este comportamiento. En nuestro caso, tenemos un proyecto que sigue el patrón modelo vista controlador, por lo que el encargado de gestionar la eliminación de nuestra alerta será un NotificationController con el siguiente código:
Ahora, para eliminar nuestra alerta debemos seleccionar el nodo HTML con el botón de cierre de la alerta. Para ello, podemos elegir cualquiera de los métodos para seleccionar nodos del DOM. En nuestro caso, este botón es el único dentro del div de notificación de la alerta (guardado en la variable notifiationElement), por lo que lo seleccionamos de la siguiente manera:
this.notificationElement.querySelector(‘button’)
Esta selección puede guardarse en una variable para facilitar su acceso. Nosotros la guardaremos en una constante llamada closeButtonElement.
Ahora, para eliminar una alerta con click en frontend JavaScript deberemos gestionar la desaparición con base a la acción click del usuario. Para ello, usamos eventos en frontend JavaScript, específicamente el evento click.
Recuerda que la gestión de eventos se maneja a partir del método addEventListener, que recibe dos parámetros: el evento a escuchar y la función con la que se reacciona a dicho evento (callback que recibe el evento). Para conocer más sobre este método, te recomendamos leer el artículo EventTarget.addEventListener ( ) de la página oficial de Mozilla Developer Network.
A continuación, te mostramos cómo se ve la estructura del evento que nos permitirá eliminar una alerta con click en frontend JavaScript:
closeButton.addEventListener (‘click’, (event) => {
})
Ahora que tenemos esta estructura, debemos insertar el código que nos permite eliminar nuestra alerta. Una de las maneras de eliminar esta alerta sin eliminar el nodo HTML div que lo encapsula por completo, es hacer que su HTML pase a ser dos comillas vacías. Es decir, escribir lo siguiente como callback del escuchador del evento:
closeButton.addEventListener (‘click’, (event) => {
this.notificationElement.innerHTML = » «;
});
}
}
Con las líneas de código anteriores, hemos logrado eliminar una alerta con click en frontend JavaScript usando el método addEventListener. En el callback de este evento podríamos utilizar muchos otros métodos de eliminación, como sería el método remove de JavaScript o la propiedad classList de JavaScript. Al final, tú decidirás qué código insertar según tus necesidades.
Para probar si este código está funcionando de manera recurrente para todas las alertas, podrías generar la creación de otra alerta usando el método setTimeout. Es decir, escribir algo como lo siguiente:
notificationController.show («mensaje de ejemplo 1»);
setTimeout (( ) => {
notificationController.show («mensaje de ejemplo 2»);
}, 1000);
Si después de crear este comportamiento quieres hacer que tu alerta se vea menos como nuestro código base y más como el ejemplo de buefy, te invitamos a leer nuestro post sobre estilizar una alerta con CSS.
¿Cuál es el siguiente paso?
Ahora que sabes cómo eliminar una alerta con click en frontend JavaScript, te invitamos a poner en práctica estos conocimientos en tus propios proyectos. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás a desarrollar proyectos con herramientas y lenguajes como JavaScript, HTML y CSS. ¿A qué esperas para dar el siguiente paso en tu formación? ¡Inscríbete ya y destaca en el sector IT!
