removeChild 질문입니다. ( 긴 글 주의 )

먼저 제 질문글을 봐주셔서 정말 감사드립니다.

일전에 appendChild를 통해 요소를 추가하는 것을 질문을 드렸었는데요,

요소를 추가하는 것은 성공했으나, 이제 지우는 것이 문제입니다.

ex)

일반 / 웹 이렇게 두 가지의 라디오 버튼이 있는데요,

일반에 체크를 했을 때 나오는 체크박스하고 웹에 체크를 했을 때 나오는 체크박스가 서로 다릅니다.

그래서 체크를 할 때마다 이전에 체크를 했을 때 나왔던 체크박스들은 지우게끔 하고 싶습니다.

예를 들어 일반에 체크를 한 후 웹을 체크를 한다면

일반을 체크했을 때 나온 체크박스들은 모두 지워지고 웹을 체크했을 때 나오는 체크박스들만 나오게끔요,

코드 입니다.

function createCheckbox(f) {

var chbx = document.createElement("input");

chbx.setAttribute("type", "checkbox");

chbx.setAttribute("id", "normalone");

chbx.setAttribute("name", "window");

chbx.setAttribute("value","윈도우 프로그램"); //증가

second.appendChild(chbx);

var chbx_text = document.createTextNode("윈도우 프로그램 ");

//chbx_text.setAttribute("name","normalone1");

second.appendChild(chbx_text);

var chbx1 = document.createElement("input");

chbx1.setAttribute("type", "checkbox");

chbx1.setAttribute("id", "normalone");

chbx1.setAttribute("name", "linux"); //증가

chbx1.setAttribute("value","리눅스 프로그램");

second.appendChild(chbx1);

var chbx_text1 = document.createTextNode("리눅스 프로그램 ");

//chbx_text.setAttribute("id","normalone2");

second.appendChild(chbx_text1);

var chbx2 = document.createElement("input");

chbx2.setAttribute("type", "checkbox");

chbx2.setAttribute("id", "normalone");

chbx2.setAttribute("name", "android"); //증가

chbx2.setAttribute("value","안드로이드/iOS 프로그램");

second.appendChild(chbx2);

var chbx_text2 = document.createTextNode("안드로이드/iOS 프로그램 ");

//chbx_text.setAttribute("id","normalone3");

second.appendChild(chbx_text2);

}

저렇게 체크박스들마다 id를 "normalone" 으로 설정을 하였습니다. ' 일반 ' 을 눌렀을 때 나오는 체크박스들 입니다.

function createCheckbox2(f) {

var p_element=document.getElementById(f.normal.value);

second.removeChild(p_element);

var p_element1=document.getElementById(f.normal.value);

second.removeChild(p_element1);

var p_element2=document.getElementById(f.normal.value);

second.removeChild(p_element2);

// 체크박스 생성

var chbx3 = document.createElement("input");

chbx3.setAttribute("type", "checkbox");

chbx3.setAttribute("id", "webone");

chbx3.setAttribute("name", "jsp");

chbx3.setAttribute("value","JSP/Servlet"); //증가

second.appendChild(chbx3);

var chbx_text3 = document.createTextNode("JSP/Servlet ");

second.appendChild(chbx_text3);

var chbx4 = document.createElement("input");

chbx4.setAttribute("type", "checkbox");

chbx4.setAttribute("id", "webone");

chbx4.setAttribute("name", "asp"); //증가

chbx4.setAttribute("value","ASP/ASP.NET");

second.appendChild(chbx4);

var chbx_text4 = document.createTextNode("ASP/ASP.NET ");

second.appendChild(chbx_text4);

var chbx5 = document.createElement("input");

chbx5.setAttribute("type", "checkbox");

chbx5.setAttribute("id", "webone");

chbx5.setAttribute("name", "php"); //증가

chbx5.setAttribute("value","PHP");

second.appendChild(chbx5);

var chbx_text5 = document.createTextNode("PHP ");

second.appendChild(chbx_text5);

}

이렇게 ' 웹 '을 클릭했을 때 나오는 체크박스들은 id가 "webone" 입니다.

<td id="first"><input type="radio" name="normal" value="webone" onclick="createCheckbox(this.form)">일반

<input type="radio" name="normal" value="normalone" onclick="createCheckbox2(this.form)">웹

</td>

일반을 클릭했을 때는 맨 위에있는 function 부분이 , 웹을 클릭했을 때는 2번째 function이 실행됩니다.

먼저 주목하셔야 할 부분은

var p_element=document.getElementById(f.normal.value);

second.removeChild(p_element);

var p_element1=document.getElementById(f.normal.value);

second.removeChild(p_element1);

var p_element2=document.getElementById(f.normal.value);

second.removeChild(p_element2);

인데요, this.form을 createdCheckbox(f)로 가져온 후에 일반과 웹 라디오 버튼에 설정해둔 밸류를 가져와서 지워버립니다.

지금은 웹을 선택 시에 일반 탭에 있는 체크박스 만 지워지구요..

결론적으로는, 체크박스들은 모두 지워지는데 그 옆에있는 TextNode들이 지워지지가 않네요...

어떡해야 하죠?