What is the best way to prevent a strikethrough from appearing on the delete button in my JavaScript TO-Do application?

Question

What is the best way to prevent a strikethrough from appearing on the delete button in my JavaScript TO-Do application?

I'm working on coding a to-do app using JavaScript, HTML, and CSS. The issue I'm facing is that when I add the text-decoration: line-through property to the list items, it also affects the X icon used for deleting tasks. I suspect this problem arises because the icon is nested within the li element, but I'm not sure how to resolve this issue.

Below is my HTML code:


<!-- Your HTML goes here -->

This is my CSS code:


/* Your CSS code goes here */

Here's my JS code as well:


// Your JavaScript code goes here

Overall, I attempted various solutions like appending the element to the task container, but encountered issues in selecting the proper list element for deletion.

javascript html css

Answer 1

Answer №1

Modify the JavaScript code:

function createNewTask() {
    // Display an error if the user does not input anything
    if (input.value === '') {
        alert("Please enter a task!");
    } else {
        let listItem = document.createElement("li");          // Create a new list item

        // Create a span for task text
        let taskText = document.createElement("span");
        taskText.innerHTML = input.value;
        taskText.classList.add("task-text");

        // Create a delete icon
        let icon = document.createElement("i");
        icon.classList.add("icon", "fa-solid", "fa-x"); // Add classes to the icon

        // Append task text and delete icon to the list item
        listItem.appendChild(taskText);
        listItem.appendChild(icon);

        listItem.classList.add("task");                       // Assign a class to the task
        taskContainer.appendChild(listItem);                  // Add element to the task container
    }
    input.value = ""; // Clear the input field
}

In the CSS:

/* Styling class for task text with line-through */
.task-text {
    flex-grow: 1;
}

.checked .task-text {
    text-decoration: line-through;
}

Answer 2

Modify the JavaScript code:

function createNewTask() {
    // Display an error if the user does not input anything
    if (input.value === '') {
        alert("Please enter a task!");
    } else {
        let listItem = document.createElement("li");          // Create a new list item

        // Create a span for task text
        let taskText = document.createElement("span");
        taskText.innerHTML = input.value;
        taskText.classList.add("task-text");

        // Create a delete icon
        let icon = document.createElement("i");
        icon.classList.add("icon", "fa-solid", "fa-x"); // Add classes to the icon

        // Append task text and delete icon to the list item
        listItem.appendChild(taskText);
        listItem.appendChild(icon);

        listItem.classList.add("task");                       // Assign a class to the task
        taskContainer.appendChild(listItem);                  // Add element to the task container
    }
    input.value = ""; // Clear the input field
}

In the CSS:

/* Styling class for task text with line-through */
.task-text {
    flex-grow: 1;
}

.checked .task-text {
    text-decoration: line-through;
}

What is the best way to prevent a strikethrough from appearing on the delete button in my JavaScript TO-Do application?

Answer №1

Similar questions

Anime.js: Grid layout causing issues with displaying simple text animations

How to harness the power of loops in JavaScript

When utilizing ng-repeat and invoking the function in the HTML, the JSON array values fail to transfer to the HTML form

Populating Hidden Form Fields with Dynamic Identifiers

Attempting to collapse the offcanvas menu in React Bootstrap by clicking on a link

Angular HttpClient not recognizing hashtag

Ways to move to the next line following the navigation bar text

Leveraging colons in the process of object destructuring

Execute asynchronous functions without pausing the thread using the await keyword

What is the best way to retrieve an element made in a different function within JavaScript?

JavaScript object rejects JSON input

CSS rules for organizing the stacking order of elements in the SuperFish Menu with

Adjust the text appearance of the graph in ApexCharts

Using Node.js to parse XLSX files and generate JSON output

jQuery problem: Unable to access a property that is undefined

Dominate with asyncCommand and Ajax in MVC ActionResults

Personalized service implemented in Angular's .config settings

The integration of CSS into Laravel was unsuccessful

Switch on and activate a button using AngularJS

Unusual problem arises with styling and element measurement (scrollWidth / scrollWidth) in Gatsby framework