2016-12-03 2 views
0

У меня проблема с методом 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> 

JS

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/

+0

'getElementsByClassName' возвращает коллекцию. Используйте цикл. –

+0

Не знаете, на что надеялись «hamburgerMenu.headerTag». «HeaderTag» - это переменная, которая также является коллекцией и не связана с коллекцией «hamburgerMenu». –

+0

Просто FYI, нет смысла использовать JS для этой функции - вы можете просто сделать это в простом CSS. – junkfoodjunkie

ответ

0

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); 

} 
+0

Да, это он! Спасибо огромное! Мне нужно спать ... – Eorekan

+0

@Eorekan: Если вам нужен только первый элемент, вы можете использовать 'querySelector'. И вам не нужно получать родителя отдельно, так как вы можете использовать '.parentNode' от ребенка. 'var hm = document.querySelector (". mobile-hamburger "); hm.parentNode.removeChild (гм); ' –

0

getElementsByClassName возвращает массив, даже он содержит один элемент, так что используйте getElementsByClassName[0] , чтобы выбрать первое вхождение (только один в данном случае)

Same применяется к getElementsbyTagName

Смежные вопросы