Pada artikel ini, kita akan mempelajari cara menambahkan dan menghapus field input secara dinamis menggunakan jQuery dengan Bootstrap. Jadi saya akan memberi Anda penjelasan singkat tentang bagaimana kami akan mencapai fungsi ini
Dalam proses ini, kami akan menggunakan beberapa fungsi berikut
klik[] Metode. click[] adalah metode bawaan di jQuery yang memulai event klik atau menjalankan fungsi yang diteruskan ke sana saat event klik terjadi
Sintaksis
$[selector].click[function];
- Parameter. Itu menerima "fungsi" parameter opsional, yang akan berjalan ketika peristiwa klik terjadi
- Nilai Pengembalian. Ini mengembalikan elemen yang dipilih dengan fungsi yang ditentukan untuk dilakukan.
Tambahkan[] Metode. Metode append[] menyisipkan konten tertentu di akhir elemen yang dipilih
Sintaksis
$[selector].append[content]_
Parameter. Itu menerima konten sebagai parameter, parameternya bisa berupa tag HTML
Hapus[] Metode. Menghapus elemen yang dipilih
Sintaksis
$[selector].remove[];
Induk[] Metode. Dapatkan elemen induk langsung dari elemen yang dipilih
Sintaksis
$[selector].parent[];
Tautan CDN
_
Mendekati.
- Pertama, tambahkan jQuery, dan Bootstrap CDN ke skrip atau unduh ke mesin lokal Anda
- Buat grup input dan tambahkan bidang input bersama dengan tombol. saya. e tombol ini akan digunakan untuk menghapus field input ini
- Buat sebuah tombol dan dengan mengklik tombol ini kita akan menambahkan field input secara dinamis
- Sekarang tulis fungsi click[] untuk menangani fungsi penambahan dan penghapusan
- Gunakan metode append[] untuk menambahkan kode bidang input ke dokumen HTML yang ada
$['#newinput'].append[newRowAdd];
- Gunakan metode remove[] untuk menghapus field input dari dokumen
$[this].parents["#row"].remove[];_
- Tambahkan beberapa gaya ke halaman menggunakan bootstrap
Contoh