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이라 지정)
2를 삭제 눌렀을 때 2가 아닌 3이 삭제됨
3개의 행이 추가가 되었을때 2를 삭제를 눌러도 이미 하나의행이 삭제가 되어 다른 행이 삭제가 되지않음( 추가된 행의 가장마지막 행만 삭제가 되고 다른행은 삭제 안됨 *하나의 행 삭제 후 다시 추가하면 마지막에 추가된 행은 삭제가되나 다른 행은 삭제가 되지 않음)
답변 3
하나의 행을 추가하실 때 그 행을 그룹으로 묶어주시는 게 좋습니다.
예를 들어
<div class="addform">
<div>제목</div>
<div>인풋폼</div>
<div>인풋폼</div>
<div>삭제버튼</div>
</div>
이렇게 그룹으로 묶어 놓고 삭제버튼 클릭 시
var $wrap = $(this).closest('.addform');
$wrap.remove();
이런식으로 해당 그룹단위로 삭제하시면 좋습니다.
만약 추가된 모든 폼을 삭제 하시고 싶다면 추가된 폼그룹에 특정 클래스를 주시고
일괄삭제 버튼을 만들어서 특정클래스를 삭제하시면 됩니다.
제가 응용을 제대로 못해서 ㅠㅠ 이런식으로 되어있는데 그룹으로 어떻게 묶는건가요 ㅠㅠ
<div>
<div>
<div style=" display: grid; grid-template-columns: repeat(5, 150px); margin:15px; text-align:center;">
<div>사료명</div>
<div>투입량 입력</div>
<div>0.0</div>
<div>투입비율</div>
</div>
<div>
<div id="addFeedForm" style=" display: grid; grid-template-columns: repeat(5, 150px); margin:15px; text-align:center;">
</div>
<div class="deleteFeedForm" style=" display: grid; grid-template-columns: repeat(5, 150px); margin:15px; text-align:center;">
</div>
</div>
</div>
<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>
$("#addFeedForm").append("<div class='remove"+cnt+"'>");
.....
$("#addFeedForm").append("</div>");
똑같이 하나의 행만 삭제가됩니다 ..ㅠ
function deleteFeedForm(e){
console.log($(e).parent())
$(".remove"+cnt+"").closest("div").remove();
}
이걸
function deleteFeedForm(e){
var class = $(e).parent().attr('class');
$('.'+class).remove();
}
이걸로해보실레요.
-Uncaught SyntaxError: Unexpected token 'class'
-Uncaught ReferenceError: deleteFeedForm is not defined
at HTMLInputElement.onclick (write.php?bo_table=mix_feed:1)
이런 에러가 나옵니다ㅠㅠ
onclick='deleteFeedForm(this)'
이걸없애시고
스크립트안에
$(document).on("click","#delete",function(){
var class = $(this).parent().attr('class');
$('.'+class).remove();
});
이렇게 넣어보세요.
해보았는데 여전히-Uncaught SyntaxError: Unexpected token 'class' 에러 문구가 가장먼저나오고 삭제 눌러도 삭제가 되지 않습니다...ㅠ
<input type='button' class='delete' id='delete' onclick='deleteFeedForm(this)' value='삭제'>
이걸
<input type='button' class='delete' id='delete' onclick='deleteFeedForm(this)' value='삭제' data-class='remove"+cnt+"'>
이렇게바꾸시고
$(document).on("click","#delete",function(){
var class = $(this).attr('data-class');
$('.'+class).remove();
});
해보시고 안되시면
말씀주세요...
-Uncaught SyntaxError: Unexpected token 'class'
계속 이 에러만 뜹니다ㅠㅠ
사이트주소줘보세요.
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();
});
}
