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>
错误：Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
当你翱翔极快时我会收到这个错误。但如果徘徊缓慢。效果很好。
为什么我一直收到此错误？实际上它正在工作，但我认为它会影响我提议的模板。
任何帮助将不胜感激。感谢
答案 0 :(得分：1)
将first_content.removeChild(img)更改为img.remove() - 然后您无需担心拥有正确的父级...如果您使用的浏览器没有删除方法，{{1} }