자바스크립트 .parent(), .children()이용해서 remove() 할려면?(삽질중)

Question

자바스크립트 .parent(), .children()이용해서 remove() 할려면?(삽질중)

조회수 14736회

jquery

html

javascript

php

1

싫어요

안녕하세요 저 삽질 시작되서 올려봅니다. ㅠㅠ

<div>
    <div id="noteForm"+num>....</div>
    <script>....</script>
    <select>...</select>
    <input type='text' ......>
    <div class="dhxform_base">....</div>
</div>

var newSelect = $(this)
     .clone()
     .attr({name:'select_form_'+counter, id:'noteForm'+counter})
     .appendTo($(this).parent())
     .change(onChange)
     .children("select").attr('name','select_options_'+counter)
     .parent().children("input").attr({name:'run_memo'+counter,id:'run_memo'+counter})
    // 위에는 문제없이 수행되므로 볼 필요 없어 보이구요..

    // 아래는 noteForm(숫자) 태그 id랑 name 수정하고 안에 모두 삭제.
     .parent().children("#noteForm"+(counter-1)).attr({name:"noteForm"+counter, id:"noteForm"+counter}).children().remove()

     /*위에는 잘되지만, 아래부처 삭제처리 안됨 ㅠㅠ*/
     .parent().children("script").remove()
     .parent().children("div[class=dhxform_base]").remove();
$("#noteForm"+counter).append(sc);

parent(), children() 이용해서 remove() 한번 사용후에 무슨 수를 바꿔봐도 삭제 처리가 안되네요.. 왜그런지 모르겠고 삽질 중입니다. ㅠㅠ

(•́ ✖ •̀)
알 수 없는 사용자

댓글 입력

score 2 · Accepted Answer

우선 this가 어딘지 명확하지 않아서, 최상위 루트인 DIV 태그가 this라고 가정하고 답변드리면.

remove()는 선택한 요소를 삭제하는 기능인데 소스를 보니 선택한 요소의 자식 요소만 삭제하고 싶으신것 같네요. 그럴땐 empty()를 쓰시는게 낫구요.

.parent(), .children()으로 위아래 왔다갔다 하지 마시고 end() 혹은 addBack()을 사용해보세요. 형제요소를 선택하는 siblings()를 써도 괜찮을 것 같네요.

삭제가 안된다고 하시는부분은 삭제한 요소를 기준으로 부모요소를 선택하셔서 그렇습니다.

.parent().children("#noteForm"+(counter-1))
.attr({name:"noteForm"+counter, id:"noteForm"+counter}).children().remove() 
// remove()는 선택한 요소를 리턴하므로 이 줄에서 .children() 메서드가 평가된 결과와 같음. 즉, 삭제한 요소를 선택한 상태

.parent().children("script").remove() // 삭제한 요소의 부모는 존재하지 않음.
.parent().children("div[class=dhxform_base]").remove(); // 삭제한 요소의 부모는 존재하지 않음.

따라서 아래 세 방법 중 하나로 수정하시면 됩니다:

// #1
.parent().children("#noteForm"+(counter-1)).attr({name:"noteForm"+counter, id:"noteForm"+counter}).children().remove()
.end().end().children("script").remove()

// #2
.parent().children("#noteForm"+(counter-1)).attr({name:"noteForm"+counter, id:"noteForm"+counter}).empty()
.end().children("script").remove()

// #3
.parent().children("#noteForm"+(counter-1)).attr({name:"noteForm"+counter, id:"noteForm"+counter}).empty()
.siblings("script").remove()

참고로 마지막 삭제작업 후 반환되는건 삭제된 요소일테니 변수 newSelect에 할당하는건 불필요한 코드가 됩니다.