부모로부터의 호출에도 불구하고 removeChild가 작동하지 않음

Question

removeChild 메서드에 문제가 있습니다. 브라우저가 저에게 타입 에러를줍니다. 창 폭이 1920px 때 나는 그것을 테스트하고 있습니다

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

} 

HTML :

여기 내 코드입니다. 디버깅 툴에서 브라우저가 <header> 태그와 <div>을 "mobile-hamburger" 클래스로 잡는 것을 볼 수 있습니다. 그래서 그들은 괜찮습니다.

여기에 removeChild 행의 문제점을 찾을 수 없습니다. 부모에게 전화 한 후 요소를 제거합니다. 객체와 같은 배열입니다 https://jsfiddle.net/u3r9m5f0/

Answer 1

document.getElementsByTagName 및 document.getElementsByClassName 반환 노드 목록 :

다음은이 코드를 사용하여 jsfiddle입니다. 첫 번째 색인에서 요소를 가져와야합니다.

는 또한 잘못된 parent.removeChild(child)에 대한 배열 심지어 하나 개의 요소가 있으므로 (이 경우 유일한)

같은 첫 번째 항목을 선택 getElementsByClassName[0] 를 사용하여 포함

var windowWidth = parseInt(window.innerWidth); 

if (windowWidth >= 700) { 

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

    headerTag.removeChild(hamburgerMenu); 

} 

Answer 2

getElementsByClassName 반환하는 구문이 에 적용됩니다 getElementsbyTagName