심재운 블로그

728x90
반응형

 

jQuery 를 통해 자동 행 추가 및 삭제를 해주는 부분입니다.

 

Dynamically add and remove elements with jQuery

 

 

<!DOCTYPE html>
<html>    
    <head>        
    <meta charset="UTF-8">        
    <title>Add More Elements</title>        
    <script src="jquery-1.7.1.min.js"></script>        
    <script>            
        $(document).ready (function () {                
            $('.btnAdd').click (function () {                                        
                $('.buttons').append (                        
                    '<input type="text" name="txt"> <input type="button" class="btnRemove" value="Remove"><br>'                    
                ); // end append                            
                $('.btnRemove').on('click', function () { 
                    $(this).prev().remove (); // remove the textbox
                    $(this).next ().remove (); // remove the <br>
                    $(this).remove (); // remove the button
                });
            }); // end click                                            
        }); // end ready        
    </script>    
    </head>    
    <body>        
        <div class="buttons">            
        <input type="text" name="txt"> <input type="button" class="btnAdd" value="Add"><br>        
        </div>    
    </body>
</html>

 

728x90
반응형

이 글을 공유합시다

facebook twitter kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

비밀글모드