尽管父母打电话，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仍无法工作

回答

相关问题