추가된 행 삭제
본문
현재 append를 사용하여 추가버튼을 생성하였는데 추가버튼을 눌러 추가된 행을 삭제를 하고 싶은데 아직 초보라 방법을 모르겠습니다 ㅠㅠㅠㅠ
<div>
<div style=" display: grid; grid-template-columns: repeat(5, 150px ); margin:15px; text-align:center;">
<div><?php echo $i+1?></div>
<div value ="<?php echo $row['wr_subject'];?>" id="addFeed<?php echo $i ?>"><?php echo $feed_name[$i]?></div>
<div><?php echo $feed_stock[$i]?></div>
<div><?php echo $feed_weight[$i]?></div>
<div><input type="button"onclick="addFeedForm(this)" data-name="addFeed<?php echo $i ?>" value="추가"></div>
</div>
</div>
<?
}
?>위에 코드에서 추가 버튼을 누르면 추가가 되는 코드가 아래의 코드입니다!
<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 id="deleteFeedForm" style=" display: grid; grid-template-columns: repeat(5, 150px); margin:15px; text-align:center;">
</div>
</div>
</div>
<?php if ($is_use_captcha) { //자동등록방지 ?>
<div class="write_div">
<?php echo $captcha_html ?>
</div>
<?php } ?>
<div class="btn_confirm write_div">
<a href="<?php echo get_pretty_url($bo_table); ?>" class="btn_cancel btn">취소</a>
<button type="submit" id="btn_submit" accesskey="s" class="btn_submit btn">작성완료</button>
</div>
</form>
<script>
function addFeedForm(e){
let addFeed = $(e).data('name');
console.log(addFeed);
e.style.visibility = 'hidden';
let addFeedRandom = document.getElementById(addFeed).getAttribute('value');
console.log(addFeedRandom);
$("#addFeedForm").append("<div >"+addFeedRandom+"</div>");
$("#addFeedForm").append("<div><input class='frm_input' name='wr_content_f[0]' size='10' type='text'></div>");
$("#addFeedForm").append("<div><input class='frm_input' name='wr_content_f[1]' size='10' type='text'></div>");
$("#addFeedForm").append("<div><input class='frm_input' name='wr_content_f[2]' size='10' type='text'></div>");
$("#addFeedForm").append("<div><input type='button' onclick='deleteFeedForm(this)'data-name='<?php echo $i ?>' value='삭제'></div>");
}
</script>
<script>
function deleteFeedForm(e){
console.log(e)
let deleteFeed = $(e).data('name');
console.log('success')
console.log(deleteFeed);
e.style.visibility = 'hidden';
let deleteFeedRandom = document.getElementById(deleteFeed).Attribute('vaule');
console.log(deleteFeedRandom);
$("#deleteFeedRandom").delete("<div >"+deleteFeedRandom+"</div>");
$("#deleteFeedRandom").delete("<div><input class='frm_input' name='wr_content_f[0]' size='10' type='text'></div>");
$("#deleteFeedRandom").delete("<div><input class='frm_input' name='wr_content_f[1]' size='10' type='text'></div>");
$("#deleteFeedRandom").delete("<div><input class='frm_input' name='wr_content_f[2]' size='10' type='text'></div>");
$("#deleteFeedRandom").delete("<div><input type='button' value='삭제'></div>");
}
</script>일단 삭제를 append 와 똑같이 행이 삭제되게 하는 delete코드를 append코드 아래에 작성을 해본것인데 실행 하게 되면 아래 사진처럼 뜨고 console.log(deleteFeed); 값도 계속 5 만 나오고 있습니다 ㅠㅠ
어떻게 해결을 해야 할까요 ㅠㅠ
답변 1
추가되는 폼을 먼저 하나의 행(Div)으로 묶으시고 임의의 클래스를 주신 후에..
예를 들면
<div class="addform"> <--추가된 폼 행-->
<div>폼</div>
<div>삭제버튼</div>
</div>
삭제버튼 클릭시
var $wrap = $(this).closest('.addform')
$wrap.remove();
감사합니다 ! 참고하여서 수정하여 삭제 버튼이 동작합니다 ~
답변을 작성하시기 전에 로그인 해주세요.
