자바스크립트 동적 div 태그삭제 관련


안녕하세요. 자바스크립트 이벤트 처리중에 동적으로 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가 뜹니다...

긴글 읽어주셔서 감사합니다.


조회수 194


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>

첫번째, 위에서 idpre_set인 element안에 있는 내용은 모두 복사되는 내용임으로, id를 복사할때마다 복사된 내용에서 변경해주거나, 아예 id 속성을 사용하지 않는 것이 좋습니다.

  • 위에서 pre_set 안에 속하는 모든 엘리먼트에서 우선 id="selection_title"과 같이 된 부분을 class="selection_title"과 같이 모두 변경했습니다.
  • 자바스크립트에서 삭제할 아이템의 정보를 기록하기 위해서 div#pre_setlast-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);
}
  • 2016년 10월 05일에 작성됨
    리눅스(유닉스) 기반의 시스템에서 웹 서비스를 개발하고 있습니다.

  • 아 정말 큰도움되었습니다...!!! 감사합니다    Hyunjoong Kim   2016.10.5 11:26     

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close