javascript - 执行失败 'removeChild'

Question

var first_content = document.getElementById('first-content'),
	offered_games = document.getElementById('offered-games');

for(var i = 0, e = offered_games.children; i < e.length; i++) {
  e[i].onmouseenter = function() {
    // img_player.style.backgroundImage = 'url(' + this.children[0].children[0].src + ')';
    var img = document.createElement('img');
    img.src = this.children[0].children[0].src;
    img.classList.add('added-promotion');
    first_content.appendChild(img);
    setTimeout(function() {
      img.style.opacity = 1;
    }, 10)
  }

  function removeImg(img) {
    setTimeout(function() {
      first_content.removeChild(img)
    }, 300)	
  }

  e[i].onmouseleave = function() {
    var added_promo = document.querySelectorAll('.added-promotion') || document.querySelector('.added-promotion');

    for(var i = 0, e = added_promo; i < e.length; i++) {
      e[i].style.opacity = 0;

      removeImg(e[i])
    }
  }
}

.first-content .img#img-player {
  height: 100%;
  width: 100%;
  background-image: url('');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.first-content #offered-games {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 980px;
  position: absolute;
  z-index: 8;
  bottom: 180px;
  left: 50%;
  margin-left: -490px;
}

.first-content #offered-games .game {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 235px;
  margin-left: 9.3px;
  vertical-align: bottom;
  display: inline-block;
  cursor: pointer;
}

.first-content #offered-games .game:hover .top {
  height: 100px;
}

.first-content #offered-games .game:hover .top img {
  -webkit-transform: translateY(-30px) scale(1.2);
  -moz-transform: translateY(-30px) scale(1.2);
  -ms-transform: translateY(-30px) scale(1.2);
  -o-transform: translateY(-30px) scale(1.2);
  transform: translateY(-30px) scale(1.2);
}

.first-content #offered-games .game:hover .bottom .text {
  max-height: 235px;
}

.first-content #offered-games .game:hover .bottom .text p.content {
  opacity: 1;
}

.first-content #offered-games .game:first-child {
  margin-left: 0;
}

.first-content #offered-games .game.sportsbook .top {
  border-top: 4px solid #ff0039;
}

.first-content #offered-games .game.sportsbook .bottom p.title {
  color: #ff0039;
}

.first-content #offered-games .game.sportsbook .bottom button {
  background: #ff0039;
}

.first-content #offered-games .game.poker .top {
  border-top: 4px solid #0c82b1;
}

.first-content #offered-games .game.poker .bottom p.title {
  color: #0c82b1;
}

.first-content #offered-games .game.poker .bottom button {
  background: #0c82b1;
}

.first-content #offered-games .game.casino .top {
  border-top: 4px solid #efb717;
}

.first-content #offered-games .game.casino .bottom p.title {
  color: #efb717;
}

.first-content #offered-games .game.casino .bottom button {
  background: #efb717;
}

.first-content #offered-games .game.bolatangkas .top {
  border-top: 4px solid #0db561;
}

.first-content #offered-games .game.bolatangkas .bottom p.title {
  color: #0db561;
}

.first-content #offered-games .game.bolatangkas .bottom button {
  background: #0db561;
}

.first-content #offered-games .game .top {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 130px;
  background: black;
  overflow: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.first-content #offered-games .game .top img {
  width: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.first-content #offered-games .game .bottom {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  display: table;
  background: white;
  padding: 20px;
  position: relative;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3);
}

.first-content #offered-games .game .bottom .text {
  max-height: 15px;
  overflow: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.first-content #offered-games .game .bottom .text.active {
  max-height: 120px;
  padding-bottom: 30px;
}

.first-content #offered-games .game .bottom .text p.title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.first-content #offered-games .game .bottom .text p.content {
  margin: 8px 0 5px;
  color: #6b6b6b;
  font-size: 13px;
  font-weight: 300;
  line-height: 17px;
  text-align: justify;
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.first-content #offered-games .game .bottom button.btn-view {
  position: absolute;
  top: 14px;
  right: 20px;
  border: none;
  border-radius: 30px;
  padding: 7px 15px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: white;
}

<div id="first-content" class="first-content">
  <div id="img-player" class="img"></div>
  <div id="offered-games">
    <div data-info="sportsbook" class="game sportsbook">
      <div class="top"><img src="http://0.tqn.com/d/worldsoccer/1/L/u/M/-/-/451274454.jpg"></div>
      <div class="bottom">
        <div class="text">
          <p class="title">Game 1</p>
          <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
        </div>
      </div>
    </div>
    <div data-info="poker" class="game poker">
      <div class="top"><img src="http://cache4.asset-cache.net/gc/492689397-soccer-player-standing-on-pitch-gettyimages.jpg?v=1&c=IWSAsset&k=2&d=%2F7DaYEj3tOfsAmZVQjUjN%2Fp85xL5t%2FRvXvNDXWwcD%2BWLs1oLsXFGW8D%2BBw37QVMl96M1ZTHpoFW9f6CnK92rTg%3D%3D"></div>
      <div class="bottom">
        <div class="text">
          <p class="title">Game 2</p>
          <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
        </div>
      </div>
    </div>
  </div>
</div>

错误:未捕获的 DOMException:无法在“Node”上执行“removeChild”:要删除的节点不是此节点的子节点。

当您将鼠标悬停得非常快时，我会收到该错误。但如果悬停缓慢。效果很好。

为什么我总是收到此错误？实际上它是有效的，但我认为它会影响我提议的模板。

如有任何帮助，我们将不胜感激。谢谢

Answer 1

将 first_content.removeChild(img) 更改为 img.remove() - 那么您无需担心拥有正确的父级...如果浏览器您使用的没有删除方法，img.parentNode.removeChild(img)