Как удалить узлы DOM, которые я создал в javascript, используя события наведения мыши в javascript? - PullRequest
Новая
       12

Как удалить узлы DOM, которые я создал в javascript, используя события наведения мыши в javascript?

0 голосов
/ 03 ноября 2018

Таким образом, HTML отображает область с сотнями маленьких прямоугольников в произвольных позициях. Я использовал JavaScript для создания маленьких коробочек. В HTML также есть кнопка, которую я запрограммировал в js, чтобы каждый раз нажимать на сотню маленьких квадратиков. Моя проблема в том, что я хочу, чтобы каждый маленький блок исчезал при каждом наведении на него курсора, предпочтительно используя для этого команду «this». Я делаю что-то не так, или javascript не может взаимодействовать с новыми элементами HTML после их создания?

Вот мой код: 

 window.onload = function(){
 createBoxes();
 $("myButton").observe("click", createBoxes);
 var divvy = $("container");
 var pars = divvy.getElementsByTagName("p")
 pars.onmouseover = destroyBoxes;

}
function destroyBoxes (event){
var divvy = $("container");
var pars = divvy.getElementsByTagName("p")
if (event.type == "mouseover")   {
pars.removeChild(This);
}

}



function createBoxes()
{
var colors = ["red", "green", "grey", "blue", "orange", "yellow"];
for (i=0;i<=99;i++){
var newP = document.createElement("p");
var top = Math.floor( Math.random() *400 ) + "px";
var left = Math.floor( Math.random() *400 ) + "px";
newP.style.top  = top;
newP.style.left  = left;
newP.style.backgroundColor = colors[ Math.floor( Math.random() *6 )];
$("container").appendChild(newP);
      var divvy = $("container");
      var pars = divvy.getElementsByTagName("p")
      pars.onmouseover = destroyBoxes;
    }
    }

1 Ответ

0 голосов
/ 04 ноября 2018

"Попробуйте использовать event.target вместо This в функции destroyBoxes()."

Как говорится ... Отличная работа по поиску решения самостоятельно!

Если интересно, вот мое решение с использованием функций jQuery. 

window.onload = function() {
  createBoxes();
  $(".myButton").on("click", createBoxes); // Use class selector
  //Find all `p`s in `container`
  //$pars.on('hover', destroyBox);

}

function destroyBox(event) {

  var $target = $(event.target);
  // The 'if' statement is redundant. Only run the function if wanted.
  //if (event.type == "mouseover") { 
    $target.remove();
  //}

}

function createBoxes() {
  var colors = ["red", "green", "grey", "blue", "orange", "yellow"];
  
  var newPs = [];
  
  for (i = 0; i < 100; i++) {
    var top = Math.floor(Math.random() * 400),
        left = Math.floor(Math.random() * 400),
        color = colors[Math.floor(Math.random() * 6)];
        
    var $newP = $('<p></p>').css({top: top, left: left, backgroundColor: color});
    newPs.push($newP);
    
  }
  
  var $container = $(".container").append(newPs); // Use class selector
  $container.find('p').on('mouseover', destroyBox);
}
.container {
  position: relative;
}

p {
  position: absolute;
  width: 10px;
  height: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div>
<button type="button" class="myButton">Click for more!</button>
</div>

<div class="container"></div>
...