자바 스크립트 delete div 요소

Question

자바 스크립트로 스톱워치를 구현 중입니다.

clear 버튼을 누를 때 div 요소를 추가로 삭제하고 싶습니다. cc(); 기능을 추가했지만 function cc()이 작동하지 않습니다. 내 코드에 무슨 문제가 있습니까?

자바 스크립트 :

a = 0; 
myButton = 0; 

function myWatch(flug) { 
    if(myButton == 0) { 
    Start = new Date(); 
    myButton = 1; 
    document.myForm.myFormButton.value = "Stop!"; 
    myInterval = setInterval("myWatch(1)", 1); 
    } else { 
    if(flug == 0) { 
     myButton = 0; 
     document.myForm.myFormButton.value = "Start"; 
     clearInterval(myInterval); 
    } 
    Stop = new Date(); 
    T = Stop.getTime() - Start.getTime(); 
    H = Math.floor(T/(60 * 60 * 1000)); 
    T = T - (H * 60 * 60 * 1000); 
    M = Math.floor(T/(60 * 1000)); 
    T = T - (M * 60 * 1000); 
    S = Math.floor(T/1000); 
    Ms = T % 1000; 
    document.myForm.myClick.value = H + ":" + M + ":" + S + ":" + Ms; 
    } 
} 
b = 0; 

function stop() { 
    b++; 
    stopa(); 
} 

function stopa() { 
    var element = document.createElement('div'); 
    element.id = pos; 
    var objBody = document.getElementsByTagName("body") 
    .item(0); 
    objBody.appendChild(element); 
    rap = ""; 
    rap = "rap" + b + "=" + H + ":" + M + ":" + S + ":" + Ms; 
    element.innerHTML = rap; 
} 

function cc() { 
    document.body.removeChild(element); 
} 

HTML :

<form name="myForm" action="#"> 
    <input type="text" size="20" name="myClick"> 
    <input type="button" value="Start" name="myFormButton" onclick="myWatch(0)" /> 
    <input type="button" value="Rap" name="Rap" onclick="stop()"> 
    <input type="button" value="clear" name="clear" onclick="cc()"> 
</form> 
<h3> 
    <div id="pos"> 
    </div> 
</h3> 

Answer 1

기능 cc은 '요소'가 무엇인지 모르고있다. 이 문제를 해결하는 가장 쉬운 방법은 jquery를 사용하는 것입니다. 당신이 사업부를 삭제하면

$('#pos').remove() 

이 같은 일이 ID를 'POS'로 사업부를 발견하고 그것을 제거 할. 단순히 'pos'가 아닌 경우 div의 ID를 cc로 전달해야 할 수 있습니다.

Answer 2

콘솔을 엽니 다. 대부분의 주요 브라우저에서 발견되며 JS 개발을로드하는 데 도움이됩니다. 여러 가지로

Uncaught ReferenceError: element is not defined 

이는 a variable scope issue있어, 말했다 :

예, if you look at your code exactly as is를 들어, 오류가 발생합니다. 몇 가지 쉬운 수정이 있습니다. 가장 쉬운 방법은 단순히 element이 더 큰 범위를 갖도록 만드는 것입니다. 즉, 먼저 함수 외부에서 정의하십시오.

var element = null; 

와 대신 세계 하나를 사용하는 새로운 지역 변수를 만들 것이기 ​​때문에 다음 stopa에, var를 사용하지 마십시오. 당신이 알 수 있습니다

element = document.createElement('div'); 

다음 문제는 elementcc에 여전히 올바른 요소를 참조하지 않는다는 것입니다 - 다음 줄에, pos가 정의되어 있지 않기 때문입니다.

element.id = pos; 

다시 콘솔 (JS보다 HTML 섹션이 더 자세하게 나와 있지만 동일한 개발자 옵션에 있음)을 살펴보십시오. 생성 된 요소의 ID는 "pos"가 아닌 [object HTMLDivElement]입니다. 나는 심지어 그들에게 id을주는 것에 대해 걱정하지 말 것을 권장합니다. id가 pos 인 div가 이미 HTML에 있습니다. 단순히 결과를 body 대신에 추가하십시오.

objBody = document.getElementById("pos"); 

그런 때 명확하고 분명 pos의 어린이 (당신은 또한 그래서 여기에 나중에 가서, 내가 확신 텍스트의 선택을 취소 할 수 있습니다)

while (objBody.hasChildNodes()) { 
    objBody.removeChild(objBody.lastChild); 
} 
document.myForm.myClick.value = ""; 

공지 사항 이제 더 이상 하나의 함수에서만 참조되기 때문에 element이 전역이어야합니다.이 함수는 해당 함수에 대해 로컬 일 수 있습니다. 그러나 objBody은 이제 stopa 및 cc으로 참조되었으므로 element과 같이 글로벌하게 만들 예정이며 그 이후의 모든 참조에 var이 포함되지 않도록합니다.

var element = null; 

오류 검사를 추가하십시오 (시작을 클릭하기 전에 지우기 등).

http://jsfiddle.net/daCrosby/MMywX/1/

Answer 3

시도는 cc() 함수에 파라미터로서 명시 컨텍스트를 전달한다.

JS

function cc(el) { 
    el.parentNode.removeChild(el); 
} 

HTML은

<input type="button" value="clear" name="clear" onclick="cc(this)"> 

Answer 4

최신 브라우져는 요소 삭제 () 방법을 지원한다. 외부 라이브러리를 jQuery 또는 긴 코드로 사용할 필요가 없습니다. 여기 exemple 작업

var x = document.getElementById("myElement"); 
x.remove(); 

->https://jsfiddle.net/tmj3p7t5/