jQuery .after() 를 이용해 추가한 Element 제거하기
왼쪽 이미지와 같은 간단한 폼을 만들고 있는데..
아래 쪽 입력란추가를 클릭하면 입력폼 라인이 하나씩
추가 되고 삭제를 누르면 해당 라인 지워지는 것을
구현하고 싶었다. jQuery의 .after()를 이용해서 추가는
쉽게 구현을 했는데 문제는 삭제를 눌렀을 때 새롭게
추가한 라인은 도무지 지워지지 않는 것이었다.
.hide() 와 .remove()를 사용해봤지만 왠일인지 삭제가
되지 않아서 내가 믿을 곳은 역시 구글 밖에 없으니까..
구글링해보니 역시 해결책이 존재했다.
결론 내가 잘못해서.. 기본을 모르니 또 삽질이다. ㅋㅋ
아래는 구현에 사용한 코드이다.
$(‘#InsertRow’).click(function() {
$(‘#item_cut_form li.cut_option:last’).after(‘<li class=”cut_option”><div class=”cut_length”><input type=”text” name=”cut_length[]” /> mm</div><div class=”cut_quantity”><input type=”text” name=”cut_quantity[]” /> 개</div><div class=”DeleteRow”>삭제</div></li>’);
});
$(‘#item_cut_form li.cut_option:last’).after(‘<li class=”cut_option”><div class=”cut_length”><input type=”text” name=”cut_length[]” /> mm</div><div class=”cut_quantity”><input type=”text” name=”cut_quantity[]” /> 개</div><div class=”DeleteRow”>삭제</div></li>’);
});
$(‘#item_cut_form li.cut_option div.DeleteRow’).live(‘click’, function() {
$(this).closest(“.cut_option”).remove();
});
굵은 글씨의 부분이 검색해서 해결한 코드이다. 이전에는 아래와 같이 코드를 작성했는데 .click() 가 통하지 않았다.
$(‘#item_cut_form li.cut_option div.DeleteRow’).click( function() {
$(this).closest(“.cut_option”).remove();
});
$(this).closest(“.cut_option”).remove();
});
일단 구현을 해서 제대로 작동 중인데.. 문제는 .live()가 뭔지 모르니 얼른 찾아봐야겠다. 너무 멀고도 험한 길이다.
live는 동적 생성한것에 대한 처리입니다
블로그 방문해 주셔서 감사합니다.
제가 jQuery를 안지가 얼마되지 않아 그 부분을 몰랐습니다.
알려주셔서 감사합니다.