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!
