JSFiddle - React, Tailwind, and code Playground

by HA3IK

HTML

<h3>Можно удалять красные и синие кубики</h3>
<table style="margin: 0 auto; width: 600px; border-collapse: collapse; border: none;">
    <tr class="rows" align="center">
        <td class="cols">1</td>
        <td class="cols">2</td>
        <td class="cols">3</td>
    </tr>
    <tr class="rows" align="center">
        <td class="cols">4</td>
        <td class="cols">5</td>
        <td class="cols">6</td>
    </tr>
    <tr class="rows" align="center">
        <td class="cols">7</td>
        <td class="cols">8</td>
        <td class="cols">9</td>
    </tr>
</table>

CSS

h3{
    text-align: center;
}
.cols {
    display: inline-block;
    width: 180px;
    height: 180px;
    margin: 8px;
    background: red;
    border: 1px solid black;
}
.rows {
    padding: 5px;
    background: yellow;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

JavaScript

var cursorObj = document.body; //наш объект для отслежки курсора
var tds = cursorObj.getElementsByTagName("td"); //все TD в нашем cursorObj

var colors = new Array("red", "blue", "grey", "green"); //массив цветов
//меняем расцветку из массива colors, для всех TD с классами cols
for (var i = 0; i < tds.length; i++) {
    if (tds[i].getAttribute("class") == "cols") {
        tds[i].style.background = colors[Math.floor(Math.random() * colors.length)];
    }
}

//отслеживаем курсор мышки над cursorObj
cursorObj.onmouseover = function (e) {
    e = e || event;
    var target = e.target || e.srcElement;
    var tdParent = target.parentNode;

    //фильтруем объекты TD
    if (target.tagName == "TD") {

        //фильтруем объекты TD по цветам. В данном случае red(красный) и blue(синий)
        if (target.style.background == "red" || target.style.background == "blue") {
            target.onclick = function () {
                tdParent.removeChild(target); //удаляем текущий объект
            }
        }
    }
}