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

Guide on deactivating the div in angular using ngClass based on a boolean value

Magnify novice mistakes: Unhandled promise rejection and Ensure every child has a distinct "key" property

What is the best way to replace testcaferc.json browsers using the command line interface (CLI

javascript/jquery: ensure Android device displays content in full-screen mode

Generating directives on the fly

Chrome and Firefox browsers are not supporting HTML simple anchor links

Size your grids in HTML5

Selenium - Struggling to locate elements that are undeniably present on the website

Having trouble loading the image source using JSON in Vue.js

Failure of default option to appear in dropdown menu in Angular

Tips for adjusting content that is 900px wide to fit properly on a mobile screen while maintaining its original width

Creating a custom event for every reference within a Vuejs for loop

The function returning the map finished before the foreach loop

The jQuery script is malfunctioning

Use jQuery's change method to initiate a hidden file input

How can I create a loop to iterate through form/input files with varying titles?

Guaranteeing the sequential execution of JavaScript functions

Can a JavaScript function spontaneously run without being called upon?

What is the best way to modify the styling of my CSS attributes?

Issue: mongoose.model is not a valid function