Eliminar una alerta con click en frontend JavaScript

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.

Antes de eliminar una alerta con click en frontend JavaScript

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:

Estructura HTML y CSS de la alerta

Antes de entrar en la lógica de JavaScript, es importante entender cómo debe estructurarse la alerta en HTML y estilizarla con CSS.

• HTML:

<div class="notification" id="notificationElement">
  <span>Este es un mensaje de alerta</span>
  <button class="close-button" id="closeButton">Cerrar</button>
</div>

• CSS:

.notification {
  padding: 20px;
  background-color: #f44336;
  color: white;
  margin-bottom: 15px;
}

.close-button {
  background-color: transparent;
  border: none;
  color: white;
  float: right;
  font-size: 20px;
  cursor: pointer;
}

¿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:

Selección del elemento y gestión de eventos

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, por lo que lo seleccionamos de la siguiente manera:

const notificationElement = document.getElementById('notificationElement');
const closeButton = notificationElement.querySelector('button');

Esta selección puede guardarse en una variable para facilitar su acceso. Nosotros la guardaremos en una constante llamada closeButtonElement.

Manejo del evento click

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).

closeButton.addEventListener('click', (event) => {
  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.

Alternativas para eliminar el elemento

Usando remove

closeButton.addEventListener('click', (event) => {
  notificationElement.remove();
});

Usando classList

closeButton.addEventListener('click', (event) => {
  notificationElement.classList.add('hidden');
});

.hidden {
  display: none;
}

Accesibilidad del botón de cerrar

Es importante asegurarse de que el botón de cerrar sea accesible para todos los usuarios, incluyendo aquellos que navegan mediante el teclado. Asegúrate de que el botón sea accesible mediante tabindex.

<button class="close-button" id="closeButton" tabindex="0">Cerrar</button>

Manejo de errores

Es importante manejar posibles errores al intentar eliminar una alerta:

closeButton.addEventListener('click', (event) => {
  try {
    notificationElement.innerHTML = '';
  } catch (error) {
    console.error('Error al eliminar la alerta:', error);
  }
});

Uso de frameworks o librerías adicionales

Puedes utilizar frameworks como React para facilitar la creación y gestión de componentes de UI:

function Notification({ message, onClose }) {
  return (
    <div className="notification">
      <span>{message}</span>
      <button onClick={onClose}>Cerrar</button>
    </div>
  );
}

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!