테스트 사이트 - 개발 중인 베타 버전입니다

추가된 행 삭제 채택완료

zzini 4년 전 조회 3,491

현재 append를 사용하여 추가버튼을 생성하였는데 추가버튼을 눌러 추가된 행을 삭제를 하고 싶은데 아직 초보라 방법을 모르겠습니다 ㅠㅠㅠㅠ

</p>

<p><div></p>

<p>   <div style=" display: grid;  grid-template-columns: repeat(5, 150px ); margin:15px; text-align:center;"></p>

<p>      <div><?php echo $i+1?></div></p>

<p>      <div value ="<?php echo $row['wr_subject'];?>" id="addFeed<?php echo $i ?>"><?php echo $feed_name[$i]?></div></p>

<p>      <div><?php echo $feed_stock[$i]?></div></p>

<p>      <div><?php echo $feed_weight[$i]?></div></p>

<p>      <div><input type="button"onclick="addFeedForm(this)" data-name="addFeed<?php echo $i ?>"  value="추가"></div></p>

<p>  </div></p>

<p></div></p>

<p><?</p>

<p>}</p>

<p>?>

위에 코드에서 추가 버튼을 누르면 추가가 되는 코드가 아래의 코드입니다!

</p>

<p><div></p>

<p>        <div></p>

<p>            <div style=" display: grid;  grid-template-columns: repeat(5, 150px); margin:15px; text-align:center;"></p>

<p>                <div>사료명</div></p>

<p>                <div>투입량 입력</div>   </p>

<p>                <div>0.0</div> </p>

<p>                <div>투입비율</div>                           </p>

<p>            </div>   </p>

<p>            <div>              </p>

<p>                <div id="addFeedForm" style=" display: grid;  grid-template-columns: repeat(5, 150px); margin:15px; text-align:center;"></p>

<p>                </div></p>

<p>                <div id="deleteFeedForm" style=" display: grid;  grid-template-columns: repeat(5, 150px); margin:15px; text-align:center;"></p>

<p>                </p>

<p>            </div></p>

<p>            </p>

<p>        </div></p>

<p>    </div></p>

<p> </p>

<p>    </p>

<p> </p>

<p>      </p>

<p> </p>

<p>    <?php if ($is_use_captcha) { //자동등록방지  ?></p>

<p>    <div class="write_div"></p>

<p>        <?php echo $captcha_html ?></p>

<p>    </div></p>

<p>    <?php } ?></p>

<p> </p>

<p>    <div class="btn_confirm write_div"></p>

<p>        <a href="<?php echo get_pretty_url($bo_table); ?>" class="btn_cancel btn">취소</a></p>

<p>        <button type="submit" id="btn_submit" accesskey="s" class="btn_submit btn">작성완료</button></p>

<p>    </div></p>

<p>    </form></p>

<p> </p>

<p>    </p>

<p>    <script>    </p>

<p>        function addFeedForm(e){</p>

<p>            let addFeed = $(e).data('name');</p>

<p>            console.log(addFeed);</p>

<p>            e.style.visibility = 'hidden';</p>

<p>            let addFeedRandom = document.getElementById(addFeed).getAttribute('value');</p>

<p>            console.log(addFeedRandom);</p>

<p>            $("#addFeedForm").append("<div >"+addFeedRandom+"</div>");</p>

<p>            $("#addFeedForm").append("<div><input class='frm_input' name='wr_content_f[0]' size='10' type='text'></div>");</p>

<p>            $("#addFeedForm").append("<div><input class='frm_input' name='wr_content_f[1]' size='10' type='text'></div>");</p>

<p>            $("#addFeedForm").append("<div><input class='frm_input' name='wr_content_f[2]' size='10' type='text'></div>");</p>

<p>            $("#addFeedForm").append("<div><input type='button' onclick='deleteFeedForm(this)'data-name='<?php echo $i ?>' value='삭제'></div>");</p>

<p>            </p>

<p>        }  </p>

<p>    </script></p>

<p>    <script></p>

<p>        function deleteFeedForm(e){</p>

<p>            console.log(e)</p>

<p>            let deleteFeed = $(e).data('name');</p>

<p>            console.log('success')</p>

<p>            console.log(deleteFeed);</p>

<p>            e.style.visibility = 'hidden';</p>

<p>            let deleteFeedRandom = document.getElementById(deleteFeed).Attribute('vaule');</p>

<p>            console.log(deleteFeedRandom);</p>

<p>            $("#deleteFeedRandom").delete("<div >"+deleteFeedRandom+"</div>");</p>

<p>            $("#deleteFeedRandom").delete("<div><input class='frm_input' name='wr_content_f[0]' size='10' type='text'></div>");</p>

<p>            $("#deleteFeedRandom").delete("<div><input class='frm_input' name='wr_content_f[1]' size='10' type='text'></div>");</p>

<p>            $("#deleteFeedRandom").delete("<div><input class='frm_input' name='wr_content_f[2]' size='10' type='text'></div>");</p>

<p>            $("#deleteFeedRandom").delete("<div><input type='button'  value='삭제'></div>");</p>

<p>            </p>

<p>    }</p>

<p>    </script>
일단 삭제를 append 와 똑같이 행이 삭제되게 하는 delete코드를 append코드 아래에 작성을 해본것인데 실행 하게 되면 아래 사진처럼 뜨고  console.log(deleteFeed); 값도 계속 5 만 나오고 있습니다 ㅠㅠ 

어떻게 해결을 해야 할까요 ㅠㅠ

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
4년 전

추가되는 폼을 먼저 하나의 행(Div)으로 묶으시고 임의의 클래스를 주신 후에..

예를 들면

 

<--추가된 폼 행-->

 

   

삭제버튼

삭제버튼 클릭시

var $wrap = $(this).closest('.addform')

$wrap.remove();

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

z
zzini
4년 전
감사합니다 ! 참고하여서 수정하여 삭제 버튼이 동작합니다 ~

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인