자바스크립트 동적 div 태그삭제 관련
조회수 12438회
안녕하세요. 자바스크립트 이벤트 처리중에 동적으로 div를 추가하는 작업을 하고 있습니다. div태그 안에 삭제버튼을 만들었는데요... 삭제 버튼을 누르면 해당한 div태그가 삭제하게 이벤트를 처리하고 싶습니다.
<div id="pre_set" style="display:none;">
<div style="margin:2px; height:80px; border:6px solid #2C3E50">
<div id="selection_title">
맛집
</div>
<div id="delete_box">
<button onclick="delete_info(this)" style="font-size:70%">X</button>
</div>
<div id="selection_content">
</div>
</div>
</div>
<div id="field" style="max-height:770px; overflow:auto;">
</div>
해당하는 html이구요.
function add_info(x) {
var div = document.createElement('div');
var temp = document.getElementById('selection_content');
temp.innerText = x;
div.innerHTML = document.getElementById('pre_set').innerHTML;
document.getElementById('field').appendChild(div);
}
function delete_info(obj) {
document.getElementById('field').removeChild(obj.parentNode);
}
해당하는 자바스크립트 코드입니다.
console창에는 Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. Error가 뜹니다...
긴글 읽어주셔서 감사합니다.
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
추가된 항목 자체를 제외하고 싶은 것 같은데, delete_info에서 obj.parentNode는
<div id='delete_box'>...</div>
입니다. 이 항목은<div id='field'>...</div>
밑에 있지 않기 때문에 발생하는 에러입니다.한가지 방법은
.parentNode
를 반복적으로 써서.<div style=...>...</div>
를 찾거나, 다음과 같이 변경하는 것이 좋을 것 같네요.참고해보세요.
https://jsfiddle.net/y41n7sjv/
<div id="pre_set" style="display:none;" last-id="0"> <div style="margin:2px; height:80px; border:6px solid #2C3E50"> <div class="selection_title"> 맛집 </div> <div class="delete_box"> <button onclick="delete_info(this)" style="font-size:70%">X</button> </div> <div class="selection_content"> </div> </div> </div> <div id="field" style="max-height:770px; overflow:auto;"> </div>
첫번째, 위에서
id
가pre_set
인 element안에 있는 내용은 모두 복사되는 내용임으로,id
를 복사할때마다 복사된 내용에서 변경해주거나, 아예id
속성을 사용하지 않는 것이 좋습니다.- 위에서
pre_set
안에 속하는 모든 엘리먼트에서 우선id="selection_title"
과 같이 된 부분을class="selection_title"
과 같이 모두 변경했습니다. - 자바스크립트에서 삭제할 아이템의 정보를 기록하기 위해서
div#pre_set
에last-id
라는 정보 저장용 속성을 추가하였습니다.
이제 자바스크립트는 다음과 같이 해보세요.
function add_info(x) { // 원본 찾아서 pre_set으로 저장. var pre_set = document.getElementById('pre_set'); // last-id 속성에서 필드ID르 쓸값 찾고 var fieldid = pre_set.getAttribute('last-id'); // 다음에 필드ID가 중복되지 않도록 1 증가. pre_set.setAttribute('last-id', fieldid + 1 ); // 복사할 div 엘리먼트 생성 var div = document.createElement('div'); // 내용 복사 div.innerHTML = pre_set.innerHTML; // 복사된 엘리먼트의 id를 'field-data-XX'가 되도록 지정. div.id = 'field-data-' + fieldid; // selection_content 영역에 내용 변경. var temp = div.getElementsByClassName('selection_content')[0]; temp.innerText = x; // delete_box에 삭제할 fieldid 정보 건네기 var deleteBox = div.getElementsByClassName('delete_box')[0]; // target이라는 속성에 삭제할 div id 저장 deleteBox.setAttribute('target',div.id); // #field에 복사한 div 추가. document.getElementById('field').appendChild(div); } function delete_info(obj) { // 삭제할 ID 정보 찾기 var target = obj.parentNode.getAttribute('target'); // 삭제할 element 찾기 var field = document.getElementById(target); // #field 에서 삭제할 element 제거하기 document.getElementById('field').removeChild(field); }
- 위에서
댓글 입력