How to undo changes to an elements style?

Question

I used Javascript to create a grid with a dynamic numbers of rows and columns. In addition, I use javascript to highlight the boxes which I hovered over. However, when I create a new grid with a different numbers of rows and columns, the style changes to highlighted boxes persist. How can I undo those changes? I.e. how can I start with a clear grid?

let btn = document.getElementById("start")
btn.addEventListener("click", createGrid)

function createGrid() {
    let numberOfRows = prompt("How many rows would you like?");
    let i = 0;
    let x = numberOfRows**2;

    document.documentElement.style.setProperty("--columns-row", numberOfRows);

    for (i; i < x ; i++) {
        var div = document.createElement("div");
        document.getElementById("container").appendChild(div);
        div.addEventListener("mouseenter", function () {
            this.style.backgroundColor = "red";
        });
    }
}

:root {
    --columns-row: 2;
}

#container {
    display: grid;
    grid-template-columns: repeat(var(--columns-row), 1fr);
    grid-template-rows: repeat(var(--columns-row), 1fr);
    width: 500px;
    height: 500px;
}

div {
    width: 100%;
    height: 100%;
    outline: 1px solid;
    float: left;
    background-color: white;
}

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Etch-a-sketch</title>
</head>
<body>
    <h1>Etch-a-sketch</h1>
    <button id="start">Start</button>
    <div id="container"></div>
</body>

Odd that you're changing background color of elements instead of manipulating a class. How come? — Tibrogargan, Jun 02 '18 at 01:02

AnilRedshift · Accepted Answer · 2018-06-02T03:13:31.760

2

You essentially need to find all of the elements that you have added the color to. document.querySelectorAll allows you to execute any valid CSS query and get the elements that match that selection. Once you have those elements, you can loop over them and remove the style attribute. The only question is how to find the elements. With minimal changes to your code, you can use the div[style*="background-color: red"] selector to match an exact style. As the linked post explains, this is brittle, so you might consider wanting to add a classname to your grid and then using querySelectorAll('.myClassname') instead.

document.getElementById('btn').addEventListener('click', () => {
  const reds = document.querySelectorAll('div[style*="background-color: red"]');
  reds.forEach(red => red.removeAttribute('style'));
  
});

div {
  width: 30px;
  height: 30px;
}

<div style="background-color: red"></div>
<div style="background-color: red"></div>
<div style="background-color: red"></div>
<div style="background-color: red"></div>
<button id="btn">remove red</button>

edited Jun 02 '18 at 03:13

answered Jun 02 '18 at 01:06

AnilRedshift

7,937
7
35
59

1

The HTML is just there to make the answer minimally complete. You just need to add this code to your `createGrid` function: reds = document.querySelectorAll('div[style*="background-color: red"]') reds.forEach(red => red.removeAttribute('style')) – AnilRedshift Jun 02 '18 at 01:44
1

@Benisburgers: I updated the answer with more information – AnilRedshift Jun 02 '18 at 03:13
Adding the following code would also work: boxes = document.querySelectorAll('div') boxes.forEach(box => box.removeAttribute('style')) It would simply "reset" all divs, whether or not they were highlighted. – Benisburgers Jun 02 '18 at 04:22
Yep! All depends on your use case. – AnilRedshift Jun 02 '18 at 05:33
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/172309/discussion-between-benisburgers-and-anilredshift). – Benisburgers Jun 02 '18 at 16:27

Tibrogargan · Answer 2 · 2018-06-02T01:26:25.350

One way to do it would be to set the background of all the children of your container back to the original color. The only real difference between this and @AnilRedShift's solution is explicitly only setting background color instead of removing the style completely.

let btn = document.getElementById("start")
btn.addEventListener("click", createGrid)

function resetGrid() {
    if (typeof shamelesslyStealFromAnilRedshift !== "undefined") {
        var reds = document.querySelectorAll('div[style*="background-color: red"]');
        reds.forEach(red => red.style.backgroundColor = null);
    } else {
        Array.from(document.getElementById("container").children).forEach(
            kid => kid.style.backgroundColor = null
        );
    }
}

function createGrid() {
    let numberOfRows = prompt("How many rows would you like?");
    let i = 0;
    let x = numberOfRows**2;

    resetGrid();

    document.documentElement.style.setProperty("--columns-row", numberOfRows);

    for (i; i < x ; i++) {
        var div = document.createElement("div");
        document.getElementById("container").appendChild(div);
        div.addEventListener("mouseenter", function () {
            this.style.backgroundColor = "red";
        });
    }
}

:root {
    --columns-row: 2;
}

#container {
    display: grid;
    grid-template-columns: repeat(var(--columns-row), 1fr);
    grid-template-rows: repeat(var(--columns-row), 1fr);
    width: 500px;
    height: 500px;
}

div {
    width: 100%;
    height: 100%;
    outline: 1px solid;
    float: left;
    background-color: white;
}

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Etch-a-sketch</title>
</head>
<body>
    <h1>Etch-a-sketch</h1>
    <button id="start">Start</button>
    <div id="container"></div>
</body>

`shamelesslyStealFromAnilRedshift` *dying* – AnilRedshift Jun 02 '18 at 03:14 — AnilRedshift, Jun 02 '18 at 03:14

How to undo changes to an elements style?

2 Answers2