removeChild 사용법 문의드려요.
본문
room1, room2, room3 이라는 3개의 방이 있고 1, 2, 3 이라는 버튼 3개가 있습니다.
버튼을 누르면 숫자와 연관된 방에 내용이 입력되고 나머지방은 모두 비우도록 했는데요.
1, 2, 3을 순서대로 누르면 계획대로 누른것외에 나머지방은 모두 비워집니다.
하지만 역순으로 누르면 누른것 외에 나머지방이 모두 비워지지 않는데요.
순서에 상관없이 1, 2, 3 어떤것을 눌러도 누른것외에 나머지방이 모두 비워지도록 하려면
어떻게 소스를 제작해야 할까요?
고수님들의 고견 부탁드립니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="cycle-1">
<div id="room1"> <p id="room1_1">room1</p> </div>
<div id="room2"> <p id="room2_1">room2</p> </div>
<div id="room3"> <p id="room3_1">room3</p> </div>
</div>
<br><br><br>
<a href="#" onclick="add_div();del_div1();del_div2();">1</a> <!--room1 에 1 쓰고 모두 비워라 -->
<a href="#" onclick="add_div1();del_div();del_div2();">2</a> <!-- room2 에 2 쓰고 모두 비워라 -->
<a href="#" onclick="add_div2();del_div1();del_div();">3</a> <!--room3 에 3 쓰고 모두 비워라 -->
<script type="text/javascript">
function add_div(){ //room1 에 1 써라
var div = document.createElement('room1');
room1.innerHTML = "<p id='room1_1'>1</p>"
}
function add_div1(){ //room2 에 2 써라
var div = document.createElement('room2');
room2.innerHTML = "<p id='room2_1'>2</p>"
}
function add_div2(){ //room3 에 3 써라
var div = document.createElement('room3');
room3.innerHTML = "<p id='room3_1'>3</p>"
}
</script>
<script type="text/javascript">
function del_div(){ //room1 을 비워라
var tag = document.getElementById( "room1" );
tag.removeChild( room1_1 );
}
function del_div1(){ //room2 을 비워라
var tag = document.getElementById( "room2" );
tag.removeChild( room2_1 );
}
function del_div2(){ //room3 을 비워라
var tag = document.getElementById( "room3" );
tag.removeChild( room3_1 );
}
</script>
</body>
</html>
답변 2
del 함수쪽 인수에 ""가 빠진건가요?
해결하였습니다. 답변 주셔서 감사해요~
간단하게..
function add_div(){ //room1 에 1 써라
room1.innerText = "1"
}
function add_div1(){ //room2 에 2 써라
room2.innerText = "2"
}
function add_div2(){ //room3 에 3 써라
room3.innerText = "3"
}
function del_div(){ //room1 을 비워라
room1.innerText ="";
}
function del_div1(){ //room2 을 비워라
room2.innerText=""
}
function del_div2(){ //room3 을 비워라
room3.innerText=""
}
