How to Create a Delete Button in JavaScript?

How to Create a Delete Button in JavaScript?

by

Today, we will explore how to create a delete button in JavaScript.

One of the dominant things we should know is creating a delete button that lets users remove unwanted elements or data from a website or application.

This article provides a step-by-step guide and code examples on how to create a delete button in JavaScript.

Let’s dive in and learn how to make a delete button using JavaScript!

A step-by-step guide to create delete button in JavaScript

Here’s a step-by-step guide on how to create a delete button in JavaScript.

Step 1: Set up your HTML structure

To start building our delete button, we need to set up the HTML structure that will hold the button and the elements we want to delete.

Here’s a basic HTML template to get started:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="container">
        <p id="element-to-remove">This is just a sample element that will be removed when the delete button is clicked.</p>
    </></div>

    <script src="script.js"></script>
</body>
</html>

2. Script.js

Now that we have our HTML structure. Let’s write the JavaScript code for creating the delete button.

Open the “script.js” file and follow the step-by-step guide:

  1. You need to create a button element first.

You can do this by using the createElement method to create a new button element and then setting its textContent property to the text you want to display on the button.

For example:

let deleteButton = document.createElement("button");
deleteButton.textContent = "Delete";

  1. Add an event listener to the button.

After that, you need to add an event listener to the button that will trigger a function when the button is clicked.

This function can be used to remove an element from the page.

For example:

deleteButton.addEventListener('click', function() {
// code to remove an element
});

  1. Remove an element.

To remove an element from the page, you can use the remove method. This method is called on the element you want to remove and will remove it from the page.

Here’s an example of how you can use this method:

let elementToRemove = document.querySelector("#element-to-remove");
elementToRemove.remove();

  1. Add the delete button.

Lastly, you will need to add the delete button to the page so that it can be clicked by the user.

You can do this by appending the button element to another element on the page using the appendChild method.

Here’s an example of how you can do this:

let containerElement = document.querySelector("#container");
containerElement.appendChild(deleteButton);


That’s it! You now have a working delete button that can be used to remove elements from the page.

Here’s the complete code:

let deleteButton = document.createElement("button");
deleteButton.textContent = "Delete";
deleteButton.classList.add("delete-button");

deleteButton.addEventListener('click', function() {
    let elementToRemove = document.querySelector("#element-to-remove");
    elementToRemove.remove();
});

let containerElement = document.querySelector("#container");
containerElement.appendChild(deleteButton);

3. CSS

In order to enhance the visual appeal of the delete button, we can apply CSS styles to it.

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

#container {
    text-align: center;
}
.delete-button {
    background-color: red;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    display: block;
    margin: 0 auto;
}

.delete-button:hover {
    background-color: darkred;
}

Here’s the final output of a simple delete button in JavaScript:

Another way on how to create a delete button in JavaScript

Here’s another example of creating a delete button.

HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <div class="container">
      <div class="todo_list">
         <h1> Sample To-Do list with Delete Button</h1>
         <div class="create_new_todo">
            <input type="text" class="name" placeholder="Todo list name">
            <input type="text" class="message" placeholder="Remarks">
            <button class="add">ADD</button>
         </div>
         <div class="wrapper">
            <ul class="todo"></ul>
         </div>
      </div>
   </div>

   <script src="script.js"></script>
</body>
</html>

Script.js:

const todoList = document.querySelector(".todo");
const addButton = document.querySelector(".add");
const nameInput = document.querySelector(".name");
const messageInput = document.querySelector(".message");

addButton.addEventListener("click", function() {
    const name = nameInput.value;
    const message = messageInput.value;

    if (name && message) {
        const todoItem = document.createElement("li");
        todoItem.textContent = `${name}: ${message}`;

        const deleteButton = document.createElement("button");
        deleteButton.textContent = "Delete";
        deleteButton.classList.add("delete-button");

        deleteButton.addEventListener("click", function() {
            todoItem.remove();
        });

        todoItem.appendChild(deleteButton);
        todoList.appendChild(todoItem);

        nameInput.value = "";
        messageInput.value = "";
    }
});

CSS:

body, html {
    height: 100%;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.todo_list {
    max-width: 400px;
    display: block;
    margin: 0 auto 40px;
    background-color: #1b83a3;
    padding: 30px;
    border-radius: 10px;
}

h1 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
    color: #fff;
    font-size: 30px;
}

.create_new_todo {
    text-align: center;
}

input[type=text] {
    width: 376px;
    padding: 10px;
}

button {
    margin-top: 10px;
    width: 400px;
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
}

.todo {
    padding-left: 0;
}

.todo li {
    padding: 1em;
    list-style-type: none;
}

.todo li:not(:last-child) {
    border-bottom: 1px solid #000000;
}

.delete-button {
    background-color: red;
    color: white;
    padding: 5px 10px;
    border: none;
    cursor:pointer
}

Here’s the final output of creating a delete button in JavaScript:

Conclusion

In conclusion, this article has provided a comprehensive guide on how to create a delete button in JavaScript.

The step-by-step instructions, along with code examples, demonstrate how to set up the HTML structure, create the button element, add an event listener, remove an element from the page, and append the delete button to the container.

Additionally, the article explores an alternative method of creating a delete button for a to-do list.

By following these instructions and incorporating CSS styles, you can successfully implement a functional delete button in your web applications or websites.

We are hoping that this article provides you with enough information that helps you understand on how to create delete button in JavaScript.

You can also check out the following article:

Thank you for reading itsourcecoders 😊.

Leave a Comment