как удалить элемент по номеру идентификатора при двойном нажатии на другой? - PullRequest
Новая
       0

как удалить элемент по номеру идентификатора при двойном нажатии на другой?

1 голос
/ 24 января 2020

Нет html может быть использовано для этого. Я застрял на этом.

Если дважды щелкнуть квадрат 1005 *, должно произойти следующее:

  • Если id квадрата равно даже - квадрат после нажатой квадрат должен быть удален со страницы. Если после щелчка квадрат нет квадрата - отобразить предупреждение, указывающее, что
  • Если идентификатор квадрата равен нечетный - квадрат со щелчком квадрат должен быть удален со страницы. Если перед нажатием square нет квадрата, отобразите предупреждение, указывающее, что

Вот мои Javascript: 

document.addEventListener("DOMContentLoaded", function () {

    let button = document.createElement('button');
    let btnText = document.createTextNode('Add Square');
    button.appendChild(btnText);
    document.body.appendChild(button);

    let sqContainer = document.createElement('div');
    sqContainer.classList.add('container')
    document.body.appendChild(sqContainer)

    let num = 0

    button.addEventListener("click", function () {
        let square = document.createElement('div')
        square.classList.add('square')
        sqContainer.appendChild(square)
        document.body.appendChild(sqContainer)
        num++
        square.setAttribute('id', num)

        let idDisplay = document.createElement('span')
        idDisplay.classList.add('id-display')
        idDisplay.innerText = num

        var colors = ["#85e6c5", "#51b9c6", "#6087c6", "#4d59ae", "#401a8e"];
        square.addEventListener("click", function (e) {
            e.target.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
        })



            if (num % 2 == 0) {
                square.addEventListener("dblclick", function (e) {
                    square.remove();
                })
            }
            // else {
            //     e.target.textContent = "O"
            //     
            // }

    })

})

и мой css

.container {
    display: flex;
    flex-wrap: wrap;
}

.square {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    margin-right: 10px;
    margin-top: 10px;
    background-color: black;
}

.square:before {
    content: attr(id);
    opacity: 0;
    transition: opacity .25s ease;
    color:white
  }

  .square:hover:before {
    opacity: 1
  }

1 Ответ

1 голос
/ 24 января 2020

Вы можете использовать nextElementSibling , чтобы получить следующий элемент, соответствующий тому, по которому щелкнули. Например: 

let firstDiv = document.getElementById("firstDiv");

function removeSecondDiv()
{
  secondDiv = this.nextElementSibling;
  secondDivID = secondDiv.id;
  secondDiv.remove();
  console.log(`The 2nd div has been removed. It's id was "${secondDivID}".`);
  this.removeEventListener('click',removeSecondDiv);
}

firstDiv.addEventListener('click', removeSecondDiv);
div{ border: solid 1px black; margin-bottom: 10px; cursor:pointer;}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p>Below are two div boxes, click the first div to remove the 2nd div</p>
  <div id="firstDiv">First Div's Content</div>
  <div id="secondDiv">Second Div's Content</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...