Crear un botón para borrar contenido en frontend

Autor: | Última modificación: 28 de noviembre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

En una aplicación web, es común tener una serie de usuarios que crean contenido y lo suben para ser visto por muchos. Sin embargo, un usuario puede querer borrar o editar su contenido. Por ello, en este post, te enseñaremos cómo crear un botón para borrar contenido en frontend usando HTML y JavaScript.

¿Cómo crear un botón para borrar contenido en frontend?

Para crear un botón para borrar contenido en frontend vamos a declarar una función dentro del controlador de nuestro proyecto. Recuerda que el controlador en el patrón MVC es el que se encarga de la comunicación entre el modelo de datos y la vista del navegador. En nuestro caso, hemos decidido llamar a esta función drawDeleteButton ( ).

Una vez tengamos esta función, deberemos crear un botón para borrar contenido en frontend. Para ello, usaremos el método createElement para crear elementos en el DOM. Luego, usaremos el método appendChild del DOM para hacer que nuestro botón sea hijo del elemento HTML que queremos. En nuestro caso, este elemento se llama contentDetailElement.

A continuación, te mostramos cómo usamos estos métodos dentro de nuestra función drawDeleteButton:

drawDeleteButton ( ) {

const buttonElement = document.createElement(‘button’);

buttonElement.textContent = ‘Borrar contenido’;

contentDetailElement.appenChild (buttonElement);

}

En la anterior función, también hemos utilizado la propiedad textContent para darle un texto al botón que hemos creado. Por el momento, este no tiene ninguna acción que se ejecute al hacer clic en él. Por ello, el siguiente paso para crear un botón para borrar contenido en frontend es otorgarle la capacidad a este botón de borrar contenido.

Para lo anterior, le añadiremos un addEventListener al botón para que podamos borrar el contenido que quiere el usuario cuando este haga clic sobre él. Si no entiendes muy bien qué hace este método, te invitamos a consultar nuestro post sobre eventos en frontend JavaScript y revisar el artículo event.addEventListener de la MDN.

A continuación, te mostramos cómo declaramos esta sección de código:

buttonElement.addEventListener (‘click’, ( ) => {

confirmDeleteContent ( )

})

¿Qué hará exactamente esta función confirmDeleteContent? Ahora podrás ver que esta función utilizará un primo del método alert: el método confirm. Este método es muy simple de utilizar, pues nos creará automáticamente dos botones: aceptar y cancelar. En el caso de que el usuario acepte, el método nos devolverá el valor booleano true. En caso contrario, nos devolverá un false.

confimDeleteContent ( ) {

const shouldDelete = window.confirm (‘Estás seguro de borrar el contenido?’);

}

Ahora que tenemos este momento de confirmación en nuestra interfaz, el paso final para crear un botón para borrar contenido en frontend es ejecutar un método que realmente elimine este contenido. Para ello, te recomendamos leer nuestro post sobre el método para borrar contenido en frontend.

A continuación, te mostramos las líneas de código finales que nos permiten borrar el contenido, usando tanto el botón como el método:

deleteContent ( ) {

const shouldDelete = window.confirm (‘Estás seguro de borrar el contenido?’);

if (shouldDelete) {

ContentService.deleteContent (contend.id)

}

}

¿Qué sigue?

Ahora que sabes cómo crear un botón para borrar contenido en frontend, ¡es el momento perfecto para aplicar este conocimiento en tus propias líneas de código! Por ello, si quieres seguir aprendiendo sobre la creación y desarrollo de proyectos web, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, un espacio que combina la teoría con la práctica de manera ideal. ¡No te lo pierdas y solicita más información!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!