اضافه و حذف کردن textbox با کلیک بر روی یک دکمه درJquery

دوشنبه 13 دی 1395

در این مقاله قصد داریم اضافه و کم کردن المنت ها به textbox را به صورت داینامیک به شما آموزش دهیم. که با استفاده از یک مثال این کار را انجام میدهیم.

اضافه و حذف کردن textbox با کلیک بر روی یک دکمه درJquery

JQuery یک کتابخانه از javaScript است،که ما را در ساخت صفحات تعاملی کمک میکند.

در jquery اضافه کردن المنت های پویا بسیار ساده است.

ما متد append() را داریم که  اجازه چسباندن متن به انتهای المنت را به ما میدهد.

متد remove() اجازه حذف محتوا از المنت خاصی را به ما میدهد.

با یک مثال دو متد را بهتر درک میکنیم.

<html>  
  
<head>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
</head>  
  
<body> <button id="Add">Click to add textbox</button> <button id="Remove">Click to remove textbox</button>  
    <div id="textboxDiv"></div>  
    <script>  
        $(document).ready(function() {  
            $("#Add").on("click", function() {  
                $("#textboxDiv").append("<div><br><input type='text'/><br></div>");  
            });  
            $("#Remove").on("click", function() {  
                $("#textboxDiv").children().last().remove();  
            });  
        });  
    </script>  
</body>  
  
</html>

حال وقتی که شما بر روی "Click to add textbox" کنید به textbox چسبانده میشود و هنگامی که بر روی  "Click to remove textbox" کلیک کنید آخرین مطلب اضافه شده از آن حذف میشود.

همانطور که  در عکس بالا  شما میبینید، قسمت رنگی شده div یی است که با ID=textboxDiv مشخص شده است.

این divtextbox یا المنتی نیست.

وقتی که دکمه add کلیک میشود با کمک  Id selector آنرا میگیریم و متد function اجرا میشود.

تابع (append) ،<div><br><input type='text'/><br></div>برای textboxDiv با کمک متد append() تقسیم میشود.

برای درک بهتر این دو متد به عکس زیر توجه کنید :

با این روش المنت ها به سادگی در jquery اضافه و حذف میشوند فقط با کلیک بر روی دکمه این کار انجام میشود.

فایل های ضمیمه

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان
  • Jquery
  • 4k بازدید
  • 5 تشکر

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید