Javascript를 사용하여 HTML 요소를 제거하는 방법은 무엇입니까?

124

나는 완전히 초보자입니다. 누군가 jQuery가 아닌 원본 Javascript를 사용하여 HTML 요소를 제거하는 방법을 알려줄 수 있습니까?

index.html

<html>
<head>
 <script type="text/javascript" src="myscripts.js" > </script>
 <style>
 #dummy {
  min-width: 200px;
  min-height: 200px;
  max-width: 200px;
  max-height: 200px;
  background-color: #fff000;
 }
 </style>
</head>
<body>
 <div id="dummy"></div>

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

myscripts.js

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

제출 버튼을 클릭하면 매우 짧은 시간 동안 사라졌다가 즉시 다시 나타납니다. 버튼을 클릭하면 요소를 완전히 제거하고 싶습니다.

javascript html

— 뉴비 코더
소스

클릭하여 오류를 발견하고 중지를 누르면 어떻게됩니까?

— 알렉스

죄송합니다. 화제의 주제이지만 실제로는 그가 자신을 "Newbie Coder"라는 이름으로 지명했고 현재 프로필은 약 9000 명의 명성을 얻었습니다. 요즘에는 "좋은 옛날"에 무언가를 묻는 것이 정말 수익성이 있습니다. :)

— Rene

189

무슨 일이 일어나고 있는지는 양식이 제출되어 페이지가 (원래 콘텐츠로) 새로 고쳐지고 있다는 것입니다. 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.

— TJ 크라우 더
소스

그것을 변경 type="button"하거나 return false;JS 함수에 넣 습니다

— Pav

@Pav : 이것은 단지 실험적인 연습이기 때문에 계속 제출할 것이라고 생각합니다. 나는 제출을 사용하는 몇 가지 프로젝트를 할 것이므로 더 잘 익숙해 질 것입니다. 어쨌든 아이디어에 감사드립니다.

— Newbie Coder

@Newbie : 몇 가지 메모를 추가했습니다.

— TJ Crowder

2

왜 elem.remove ();

— Muhammad Umer 2013

1

@ Ghos3t-몇 가지 방법 : 1. 속성 스타일 핸들러에서 호출하는 모든 함수는 전역이어야하며 전역 네임 스페이스는 이미 Really Crowded ™이며 다른 것과 충돌하는 함수 이름을 쉽게 선택할 수 있습니다 (이 고유 한 이름을 가진 객체를 사용하고 모든 핸들러를 그 위에 놓음으로써 해결할 수 있습니다.) 2. 예전 속성 스타일 방식 (또는 onxyz요소 의 속성에 할당)을 사용하면 단일 핸들러 만 허용 되며 속성에 할당하면 이전 에 있던 모든 항목을 대체하므로 다른 항목과 잘 작동하지 않습니다. (계속)

— TJ Crowder

34

그냥 해 element.remove();

여기에서 시도하십시오.

http://jsfiddle.net/4WGRP/

— 무하마드 우 메르
소스

5

이것은 상당히 새로운 추가 인 것처럼 보이며 IE 및 FF 버전 22 및 이전 버전 ( red-team-design.com/… ) 과 같은 완전한 브라우저 지원이 없기 때문에 주의 하십시오.

— dule

1

나는 이것을 사용하기 위해 개인적으로 또 다른 5 년을 기다릴 것이다

— slebetman

2

음, 이것은 현재 지원되지 않는 것 같습니다 : caniuse.com/#search=remove . 나는 지금 그것을 사용하는 것을 받아 들일 것입니다. 당신이 절대적으로 IE11을 지원해야하는 경우, 나는 ... polyfill 쉽게 구축 할 수도있을 것 같군요

— jehon

5

미래를 보장하는 코드를 작성하는 것이 과거를위한 프로그래밍보다 낫습니다. 유지 관리 시간을 절약하고 사용.remove()

— Gibolt 2017-08-13

9

input type = "submit"대신 input type = "button"을 사용해야합니다.

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

기본 html 및 javascript 리소스를 보려면 Mozilla 개발자 센터 를 확인 하세요.

— CoderHawk
소스

1

W3Schools에서 Mozilla 개발자 센터로의 링크를 변경했습니다. 내 추론을 위해 w3fools.com 을 살펴보십시오 ... 그 외에도 좋은 답변 :)

— Alastair Pitts

2

@Alastair Pitts-괜찮습니다. PO를 html 및 js 기본 자습서로 지정하고 싶습니다.

— CoderHawk

8

귀하의 JavaScript가 정확합니다. 버튼 type="submit"에 페이지가 새로 고침되는 원인이 있습니다.

— Pav
소스

5

제출 버튼이 페이지를 다시로드하기 때문에 다시 나타납니다. 이 동작을 방지하는 가장 간단한 방법은 return false다음 onclick과 같이 a 를 추가하는 것입니다.

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

— mVChr
소스

4

입력 유형을 "버튼"으로 변경합니다. TJ와 Pav가 말했듯이 양식이 제출되고 있습니다. 귀하의 Javascript가 정확 해 보이며 비 JQuery 방식으로 시도해 주셔서 감사합니다. :)

— 뉴탕
소스

나는 제출을 사용하는 내 미래의 프로젝트를위한 실험적인 연습 일 뿐이므로 더 잘 익숙해지기 때문에 계속 제출할 것이라고 생각합니다.

— Newbie Coder

4

index.html

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

myscripts.js

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

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

})

— e-motiv
소스

3

이것이 올바른 코드입니다. 양식이 제출되고 새 페이지 (요소가 다시 존재 함)가 표시 될 수 있습니다.

— 알렉스
소스

3

스크립트 에서이 코드를 실행 해보십시오 .

document.getElementById("dummy").remove();

그리고 요소 / 버튼이 제거되기를 바랍니다.

— 심 리퍼
소스

2

작동합니다. 버튼을 유지하려면 "더미"에서 버튼을 제거하십시오 div.

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

#dummy {
  min-width: 200px;
  min-height: 200px;
  max-width: 200px;
  max-height: 200px;
  background-color: #fff000;
}

<div id="dummy">
  <button onclick="removeDummy()">Remove</button>
</div>

스 니펫 확장

— Durtle02
소스

1

저도 여전히 초보자이지만 간단하고 쉬운 방법이 하나 있습니다. 일부가 아닌 전체 태그 인 outerHTML을 사용할 수 있습니다.

예 : <tag id='me'>blahblahblah</tag>의 innerHTML은 blahblahblah이고 outerHTML은 전체입니다 <tag id='me'>blahblahblah</tag>.

따라서 예를 들어 태그를 삭제하려는 경우 기본적으로 데이터를 삭제하는 것이므로 outerHTML을 빈 문자열로 변경하면 삭제하는 것과 같습니다.

<body>
    <p id="myTag">This is going to get removed...</p>
    <input type="button" onclick="javascript:
        document.getElementById('myTag').outerHTML = '';//this makes the outerHTML (the whole tag, not what is inside it)
    " value="Remove Praragraph">
</body>

대신 표시하지 않으려면 가시성, 불투명도 및 표시 속성을 사용하여 JS에서 스타일을 지정할 수 있습니다.

document.getElementById('foo').style.visibility = hidden;
//or
document.getElementById('foo').style.opacity = 0;
//or
document.getElementById('foo').style.display = none;

참고 opacity 요소 여전히 표시하게, 그냥 당신이 많이 볼 수 없습니다. 또한 텍스트를 선택하고, 복사하고, 붙여넣고, 보이지 않는 경우에도 일반적으로 할 수있는 모든 작업을 수행 할 수 있습니다.

Visibility 상황에 더 적합하지만 적용된 요소만큼 큰 빈 투명 공간을 남깁니다.

웹 페이지를 만드는 방법에 따라 표시하는 것이 좋습니다. 기본적으로 뷰에서 요소를 삭제하는 것을 표시하지만 DevTools에서 여전히 볼 수 있습니다. 도움이 되었기를 바랍니다!

— 해리 제임스 포터 27
소스