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() {
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;
}
/* More CSS code here */
<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>Error:
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.Encountering an error when hovering quickly, but functions properly with slower hover speed.
Seeking assistance to resolve the recurring error and ensure smooth functioning. Thank you!