무슨 일이 일어나고 있는지는 양식이 제출되어 페이지가 (원래 콘텐츠로) 새로 고쳐지고 있다는 것입니다. click제출 버튼 에서 이벤트를 처리하고 있습니다.

요소를 제거하고 양식을 제출 하지 않으 려면 submit대신 양식 에서 이벤트를 처리하고 false처리기에서 반환 합니다.

HTML :

<form  onsubmit="return removeDummy(); ">
    <input type="submit" value="Remove DUMMY"/>
</form>

자바 스크립트 :

function removeDummy() {
    var elem = document.getElementById('dummy');
    elem.parentNode.removeChild(elem);
    return false;
}

그러나 유일한 목적이 더미 div를 제거하는 것이 아니라면 양식이 전혀 필요하지 않습니다. 대신 :

HTML :

<input type="button" value="Remove DUMMY" onclick="removeDummy()" />

자바 스크립트 :

function removeDummy() {
    var elem = document.getElementById('dummy');
    elem.parentNode.removeChild(elem);
    return false;
}

그러나 이벤트 핸들러를 설정하는 스타일은 구식입니다. JavaScript 코드가 자체 파일 등에 있다는 점에서 본능이있는 것 같습니다. 다음 단계는 더 나아가 onXYZ이벤트 핸들러를 연결하기 위해 속성을 사용하지 않는 것 입니다. 대신 JavaScript에서 새 방식 (2000 년경)으로 연결할 수 있습니다.

HTML :

<input id='btnRemoveDummy' type="button" value="Remove DUMMY"/>

자바 스크립트 :

function removeDummy() {
    var elem = document.getElementById('dummy');
    elem.parentNode.removeChild(elem);
    return false;
}
function pageInit() {
    // Hook up the "remove dummy" button
    var btn = document.getElementById('btnRemoveDummy');
    if (btn.addEventListener) {
        // DOM2 standard
        btn.addEventListener('click', removeDummy, false);
    }
    else if (btn.attachEvent) {
        // IE (IE9 finally supports the above, though)
        btn.attachEvent('onclick', removeDummy);
    }
    else {
        // Really old or non-standard browser, try DOM0
        btn.onclick = removeDummy;
    }
}

… 페이지 맨 끝에 pageInit();있는 script태그 body(닫는 </body>태그 바로 앞 ) 또는 window load이벤트 내 에서 호출합니다. 이는 페이지로드주기의 매우 늦게 발생 하므로 일반적으로 이벤트 연결에 적합하지 않습니다. 핸들러 ( 이후에 발생 예를 들어 모든 이미지가 마지막으로로드 된 ).

브라우저 차이를 처리하기 위해 약간의 처리를해야했습니다. 이벤트를 연결하는 기능을 원할 것이므로 매번 해당 논리를 반복 할 필요가 없습니다. 또는 jQuery , Prototype , YUI , Closure 또는 기타 여러 라이브러리를 사용하여 이러한 브라우저 차이를 부드럽게 처리 할 수 ​​있습니다. 그건 매우 중요한 기본 재료는 자바 스크립트 기본 사항 및 DOM 기초의 측면에서 모두, 무슨 이해하지만, 라이브러리는 불일치를 많이 취급하고, 또한 편리한 유틸리티를 많이 제공 – 이벤트 핸들러 그 접선의 수단처럼 거래와 브라우저 차이. 대부분은 기능을 설정하는 방법도 제공합니다 (예 :pageInit)가 실행되기 훨씬 전에 DOM을 조작 할 준비가되는 즉시 실행됩니다 window load.

답변

<form>
  <input type="button" value="Remove DUMMY" onclick="removeDummy(); "/>
 </form>

<input type="submit" value="Remove DUMMY" onclick="removeDummy(); return false;" />

<input id="suby" type="submit" value="Remove DUMMY"/>

document.addEventListener("DOMContentLoaded", {
//Do this AFTER elements are loaded

    document.getElementById("suby").addEventListener("click", e => {
        document.getElementById("dummy").remove()
    })

})