remove 관련 질문입니다!
본문
안녕하세요 제가 현재 append()를 통해 행을 추가하였는데 추가된 행 을 삭제 하는 부분이 문제가 있는데 아직 잘 못해서 어떻게 수정을 해야될지 모르겠습니다...
삭제를 누르면 행이 삭제가 되야되는데 만약 3개를 추가를해서 추가된 행이 3개일때 삭제를 누르면 하나의 행만 삭제가 되고 두개의행은 삭제가 되지 않습니다 ㅠㅠㅠ 그리고 추가된행이 1,2,3일때 2를 삭제 누르면 2가 삭제가 되야 하는데 가장마지막에 추가한 3이 삭제가 됩니다 도움을 주시면 감사하겠습니다 ㅠ!!
<script>
let cnt= 0;
function addFeedForm(e){
let addFeed = $(e).data('name');
console.log(addFeed);
e.style.visibility = 'hidden';
let addFeedRandom = document.getElementById(addFeed).getAttribute('value');
cnt++;
console.log(addFeedRandom);
$("#addFeedForm").append("<div class='remove"+cnt+"'>"+addFeedRandom+"</div>");
$("#addFeedForm").append("<div class='remove"+cnt+"'><input class='frm_input' name='wr_content_f[0]' size='10' type='text'></div>");
$("#addFeedForm").append("<div class='remove"+cnt+"'><input class='frm_input' name='wr_content_f[1]' size='10' type='text'></div>");
$("#addFeedForm").append("<div class='remove"+cnt+"'><input class='frm_input' name='wr_content_f[2]' size='10' type='text'></div>");
$("#addFeedForm").append("<div class='remove"+cnt+"'><input type='button' class='delete' id='delete' onclick='deleteFeedForm(this)' value='삭제'></div>");
}
</script>
<script>
function deleteFeedForm(e){
console.log($(e).parent())
$(".remove"+cnt+"").closest("div").remove();
}
</script>
추가를 눌러 추가된 행(임의로 1,2,3이라 지정)
3개의 행이 추가가 되었을때 2를 삭제를 눌러도 이미 하나의행이 삭제가 되어 다른 행이 삭제가 되지않음( 추가된 행의 가장마지막 행만 삭제가 되고 다른행은 삭제 안됨 *하나의 행 삭제 후 다시 추가하면 마지막에 추가된 행은 삭제가되나 다른 행은 삭제가 되지 않음)
!-->답변 3
하나의 행을 추가하실 때 그 행을 그룹으로 묶어주시는 게 좋습니다.
예를 들어
<div class="addform">
<div>제목</div>
<div>인풋폼</div>
<div>인풋폼</div>
<div>삭제버튼</div>
</div>
이렇게 그룹으로 묶어 놓고 삭제버튼 클릭 시
var $wrap = $(this).closest('.addform');
$wrap.remove();
이런식으로 해당 그룹단위로 삭제하시면 좋습니다.
만약 추가된 모든 폼을 삭제 하시고 싶다면 추가된 폼그룹에 특정 클래스를 주시고
일괄삭제 버튼을 만들어서 특정클래스를 삭제하시면 됩니다.
!-->
function deleteFeedForm(e){
console.log($(e).parent())
$(".remove"+cnt+"").closest("div").remove();
}
이걸
function deleteFeedForm(e){
var class = $(e).parent().attr('class');
$('.'+class).remove();
}
이걸로해보실레요.
1)
$("#addFeedForm").append("<div class='remove"+cnt+"'><input type='button' class='delete' id='delete' onclick='deleteFeedForm(this)' value='삭제'></div>");
->
$("#addFeedForm").append("<div class='remove"+cnt+"'><input type='button' class='delete' id='delete' value='삭제'></div>");
2)
function deleteFeedForm(e) {
~
}
->
$(function() {
$(document).on('click', '.delete', function() {
$(this).parent().remove();
});
}