無法執行 'removeChild之'

var first_content = document.getElementById('first-content'), 
 
\t 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) \t 
 
    } 
 

 
    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.

當你徘徊極快我得到這個錯誤。但如果徘徊緩慢。它運作良好。

爲什麼我不斷收到此錯誤？實際上它工作正常，但我認爲它會影響我提出的模板。

任何幫助，將不勝感激。由於

來源

2016-11-22 Lara Belle

看了一眼這個，看到了代碼牆，並轉身離去。考慮編輯以提供更多[_Minimal_，Complete和Verifiable示例]（http://stackoverflow.com/help/mcve）。 – qxz

@qxz其實它是最小化，因爲我提供的代碼片段正在運行。我刪除了所有不必要的代碼。也許我只做兩個選擇。謝謝 –

錯誤似乎很清楚，你試圖從另一個不是第一個元素直接父母的元素中移除一個元素。控制檯記錄元素，並找出你有什麼元素。 – adeneo

變化first_content.removeChild(img)到img.remove() - 那麼你就不需要擔心有正確的父母......如果你正在使用的瀏覽器沒有remove方法，img.parentNode.removeChild(img)

來源

2016-11-22 02:23:26

無法執行 'removeChild之'

回答

相關問題