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

조회수 12414회

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

    첫번째, 위에서 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);
    }
    

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)