관리 메뉴

심재운 블로그

jQuery 를 통해 자동 행 추가 및 삭제 본문

프로그래밍/jQuery

jQuery 를 통해 자동 행 추가 및 삭제

재우니 2016. 5. 13. 16:21

 

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>

 

Tag
0 Comments
댓글쓰기 폼