儘管父母打電話，removeChild仍無法工作

我遇到removeChild方法存在問題。瀏覽器給我一個類型錯誤。儘管父母打電話，removeChild仍無法工作

這裏是我的代碼：

HTML

<header> 
    <div id="header-div"> 
     <img id="logo-image" src="img.jpg" alt="image"> 
    </div> 
    <div class="mobile-hamburger"> 
     <a href="#menu" class="box-shadow-menu">text</a> 
    </div> 
</header>

var windowWidth = parseInt(window.innerWidth); 

if (windowWidth >= 700) { 

let headerTag = document.getElementsByTagName("header"); 
let hamburgerMenu = document.getElementsByClassName("mobile-hamburger"); 

hamburgerMenu.headerTag.removeChild(hamburgerMenu); 

}

我測試它，當窗口寬度爲1920px。我還可以看到，在調試工具中，瀏覽器抓取了<header>標記，<div>和"mobile-hamburger"類。所以他們很好。

我在這裏找不到removeChild這一行的問題。我在調用它的父代後刪除了一個元素。

下面是這個代碼的jsfiddle：https://jsfiddle.net/u3r9m5f0/

來源

2016-12-03 Eorekan

'getElementsByClassName'返回一個集合。使用循環。 – 2016-12-03 20:17:13

不確定你對'hamburgerMenu.headerTag'的期望。 'headerTag'是一個變量，它也是一個集合，與'hamburgerMenu'集合無關。 – 2016-12-03 20:17:44

只是FYI，沒有理由使用JS來實現這個功能 - 你可以用簡單的CSS來完成。 – junkfoodjunkie

document.getElementsByTagName和document.getElementsByClassName返回節點列表，是陣列狀物體。您需要在第一個索引處獲取元素。

你也有語法parent.removeChild(child)不正確

var windowWidth = parseInt(window.innerWidth); 

if (windowWidth >= 700) { 

    let headerTag = document.getElementsByTagName("header")[0]; 
    let hamburgerMenu = document.getElementsByClassName("mobile-hamburger")[0]; 

    headerTag.removeChild(hamburgerMenu); 

}

來源

2016-12-03 20:17:48 synthet1c

是的，就是這樣！非常感謝！我需要去睡覺... – Eorekan

@Eorekan：如果你只想要第一個元素，你可以使用'querySelector'。而且你不需要單獨獲取父項，因爲你可以使用子項中的'.parentNode'。 'var hm = document.querySelector（「。mobile-hamburger」）; hm.parentNode.removeChild（HM）;' – 2016-12-04 21:24:51

getElementsByClassName返回數組即使它包含一個元素，所以使用getElementsByClassName[0] 選擇第一次出現（在這種情況下，只有一個）

同適用於getElementsbyTagName

來源

2016-12-03 20:24:53

儘管父母打電話，removeChild仍無法工作

回答

相關問題