Cara menghapus elemen yang dibuat secara dinamis di javascript

Jadi pertama, kita akan membuat elemen div baru menggunakan metode createElement() dengan id dan menambahkannya ke wadah

Kemudian, kita akan memilih elemen div yang dibuat menggunakan metode getElementById() dan menghapusnya dari elemen induknya menggunakan metode removeChild()

Saat Anda harus menambahkan elemen, Anda perlu menampilkan elemen satu per satu dan untuk menghapusnya, sembunyikan

Di sini masalahnya adalah - ada beberapa elemen yang tidak terpakai tersedia yang menempati ruang dalam kode Anda dan membuatnya berantakan bahkan jika Anda tidak memerlukan beberapa elemen

Solusi kedua lebih baik daripada yang pertama di mana Anda dapat membuat dan menghapus elemen secara dinamis saat Anda membutuhkannya

Dalam tutorial ini, saya menggunakan solusi kedua

Demo  Unduh

Isi

1. HTML

Membuat <div class='element' id='div_1'> yang memiliki satu kotak teks dan <span class='add'>

Kode Selesai

<div class="container" >
   <div class='element' id='div_1'>
        <input type='text' placeholder='Enter your skill' id='txt_1' >&nbsp;<span class='add'>Add Skill</span>
   </div>
</div>

2. jQuery

Tambahkan Elemen

Saat kelas add_ diklik –

Menghitung jumlah total elemen yang ditambahkan jika tidak mencapai maksimum e. g. 5 lalu tambahkan elemen <div>_ baru dengan kotak teks dan <span class='remove' > jika tidak, jangan tambahkan lagi

Di sini, saya menetapkan nilai maksimum menjadi 5, Anda dapat mengubahnya dengan mengedit kode berikut –

var max = 5;

Hapus Elemen

Saat kelas remove_ diklik –

Menggunakan ID elemen <span> yang diklik untuk menghapus wadah <div>

Kode Selesai

$(document).ready(function(){

   // Add new element
   $(".add").click(function(){

       // Finding total number of elements added
       var total_element = $(".element").length;
 
       // last <div> with element class id
       var lastid = $(".element:last").attr("id");
       var split_id = lastid.split("_");
       var nextindex = Number(split_id[1]) + 1;

       var max = 5;
       // Check total number elements
       if(total_element < max ){
            // Adding new div container after last occurance of element class
            $(".element:last").after("<div class='element' id='div_"+ nextindex +"'></div>");
 
            // Adding element to <div>
            $("#div_" + nextindex).append("<input type='text' placeholder='Enter your skill' id='txt_"+ nextindex +"'>&nbsp;<span id='remove_" + nextindex + "' class='remove'>X</span>");
 
       }
 
   });

   // Remove element
   $('.container').on('click','.remove',function(){
 
       var id = this.id;
       var split_id = id.split("_");
       var deleteindex = split_id[1];

       // Remove <div> with id
       $("#div_" + deleteindex).remove();

   }); 
});

3. Demo

Lihat Demo

4. Kesimpulan

Di dalam contoh, saya telah menggunakan field input Anda dapat melakukan proses yang sama dengan elemen lain seperti Select, tombol Radio, Checkbox, dll

Javascript juga memberi kita kemampuan untuk benar-benar menambah dan menghapus elemen secara langsung di DOM dan ini mungkin tampak seperti perbedaan yang halus tetapi penting untuk sejumlah keadaan yang berbeda dan jika Anda mulai bekerja dengan kerangka kerja seperti Vue atau Angular atau pustaka seperti Bereaksi

Jadi dalam panduan ini dan sebenarnya dalam beberapa panduan berikutnya, kita akan membahas bagaimana kita dapat menambahkan dan menghapus elemen atau nama yang tepat untuk membuat elemen di dalam DOM dengan menggunakan JavaScript dan kita akan membangun

Sekarang jelas itu tidak akan terhubung ke ujung belakang tetapi yang ingin saya lakukan adalah saya ingin membuat formulir kecil di sini sehingga pengguna dapat datang untuk mengetik pesan. Tekan kirim, dan kemudian akan ditambahkan tetapi alih-alih hanya muncul atau terungkap karena ini adalah pesan yang sebelumnya tidak ada

Yang ingin saya lakukan sebenarnya adalah membuat pesan dan kami akan membuat objek baru di dalam DOM, jadi menurut saya ini adalah contoh yang bagus untuk memahami cara kerjanya. Mari kita mulai dengan membuat input kita jadi saya akan membuat input di sini dan mari kita beri id, katakan saja, input obrolan. Itu hanya akan menjadi input teks biasa dan kemudian kita juga akan membuat tombol dengan id dan tombol ini hanya akan mengatakan msgBtn

Dan kemudian di dalam sini kita hanya akan mengatakan kirim dan itu saja yang kita butuhkan di sana. Sekarang nanti saya akan menambahkan penangan klik di sini. Tapi untuk saat ini jangan khawatir tentang itu dan saya akan turun ke tag skrip dan membuat fungsi di sini. Saya akan mengatakan fungsi dan mengirim pesan. Ini tidak akan menerima argumen apa pun dan ini akan menjadi fungsi yang akan kita panggil dari dalam penangan klik. Jadi di sini saya akan mengatakan di klik dan kemudian hanya meneruskan fungsi kirim pesan

Sekarang mari kita uji ini hanya untuk memastikan semuanya terhubung dengan benar. Jadi konsol logout kami hanya akan mengatakan "Hai". Tekan simpan dan sekarang mari kembali ke sini dan membuka konsol javascript

OKE. Jadi sekarang jika saya mengklik kirim, Anda dapat melihatnya bertuliskan "Hai". Jadi ini semua terhubung dengan benar, kami memiliki on click handler yang disebut lean this dan fungsi pesan. Dan saat ini mengirim pesan tidak lebih dari melakukan logging konsol. Jadi sekarang masuk ke dalam sini. Mari kita mulai membangun struktur generator kita

Jadi ini akan menjadi generator HTML karena kita akan membuat elemen baru langsung di dalam DOM. Jadi katakanlah saya akan membuat variabel di sini dan kami akan menyebutnya div baru dan kemudian untuk membuat div baru perintahnya adalah, document.createElement. Jadi Anda akan mengatakan membuat elemen. Ini membutuhkan string dan elemen apa pun yang ingin Anda buat

Sekarang dalam panduan selanjutnya, saya akan menunjukkan kepada Anda bagaimana Anda dapat membuat elemen lainnya. Anda tidak terbatas hanya pada div. Saya akan menunjukkan kepada Anda bagaimana Anda dapat membuat daftar unordered dan daftar item dan hal-hal semacam itu. Jadi sekarang kita memiliki div baru, sekarang kita perlu menambahkan kelas ke dalamnya jadi saya akan mengatakan newDiv.classList.add('chatMsg');. Ini tidak diperlukan secara teknis tetapi ini adalah sesuatu yang saya ingin Anda lihat setiap kali kami menambahkan item baru

Saya ingin Anda melihat dengan tepat apa yang terjadi di tingkat DOM dan ini membantu setiap kali Anda menambahkan kelas dan karena di 99. 9% dari keadaan Anda, Anda pasti ingin lulus dalam semacam kelas khusus. Jadi saya ingin menunjukkan kepada Anda bagaimana Anda bisa melakukan itu. Jadi ini akan menambahkan kelas pesan obrolan ke div baru kita dan kemudian dari sini, kita perlu mulai memasukkan beberapa konten

Jadi mari kita gunakan variabel "biarkan" ini katakan let chatInput = document.querySelector('#chat-input').value;. Kami ingin mengambil nilai dari itu dan itu akan memberi kami nilai. Dan jika Anda ingin mengujinya, anggap saja kami ingin menghibur. catat ini dan mari kita pastikan semuanya sudah terhubung

Jadi saya datang ke sini dan mengatakan "Hai" lalu tekan kirim dan Anda dapat melihat bahwa kami sekarang memiliki akses untuk mengambil nilai input obrolan itu. Jadi kita sangat dekat di sini sekarang kita telah membuat div baru. Kami belum menambahkannya ke DOM tetapi kami telah membuat div baru kami telah menambahkan kelas. Dan kemudian dari sana, kami mengambil nilai dari input

Jadi sekarang yang akan saya lakukan adalah membuat variabel baru const newContent = document.createTextNode Kemudian berikan nilai itu. Kami akan memberikan nilai (chatInput);. Maka kita hanya memiliki satu langkah lagi untuk membuat bagian ini berfungsi. Jadi sekarang kita memanggil newDiv.appendChild_ kita dan kemudian menempelkan nilai konten baru itu

Oke jadi apa yang terjadi di sini? . Jadi kami membuat div baru di sini online 18 dari sana kami menambahkan kelas ke div itu

Kemudian kami mengambil nilai masukan sehingga kami mengambilnya dari masukan formulir. Kemudian kita berada di baris ini (21) kita membuat simpul teks. Jadi jika Anda mencoba untuk melewati langkah ini, jika Anda mencoba untuk pergi 20 baris ke baris 22 apa yang akan Anda lakukan adalah mencoba menempatkan input teks mentah ke dalam DOM di dalam div itu dan itu tidak akan berhasil. Yang perlu Anda lakukan adalah membuat simpul teks. Jadi sekarang kita telah mengonversi string biasa itu menjadi objek javascript dengan simpul teks buat ini dan kemudian kita dapat menggunakan append child

Dan yang akan dilakukan adalah menggeser konten baru kita langsung ke div baru itu. Sekarang kita benar-benar perlu bekerja dengan DOM jadi saya akan memisahkan kode ini sedikit saja. Semua yang ada di sini, masing-masing baris ini harus berurusan dengan pembuatan simpul baru itu, tetapi tidak ada yang ditambahkan ke DOM secara langsung. Jadi sekarang kita perlu melakukan itu

Jadi sekarang saya akan mengambil pembungkus widget itu. Jadi saya akan mengatakan const widget = document.querySelector('.widget');. Lalu saya akan membuat pembungkus obrolan. Jadi apa yang akan saya lakukan adalah saya harus memiliki tempat untuk meletakkan ini jadi saya tidak ingin hanya meletakkannya di dalam widget

Saya juga perlu menemukan di mana tepatnya di DOM saya akan menempatkan ini dan jadi di sini saya akan mengatakan let chatWrapper = document.querySelector(''). Saya akan benar-benar menggunakan kembali pesan tersebut. Jadi ada beberapa cara Anda dapat melakukan ini dan dalam panduan berikutnya saya akan menunjukkan kepada Anda apa yang bisa menjadi cara yang lebih baik untuk melakukannya tetapi untuk saat ini saya hanya ingin fokus pada proses pembuatan setiap node HTML. Jadi untuk pemilih kueri ini, saya hanya akan mengatakan msgBtn

Sekarang saya akan mengatakan

  
  



  

    
    Submit
    
  

Dan mengapa saya akan melakukan itu?

Saya akan menunjukkan kepada Anda di sini dalam satu detik. Jadi yang saya lakukan di sini adalah saya ingin memastikan bahwa setiap kali saya menekan kirim, tombol itu dihapus. Jadi jika Anda ingin benar-benar melihat ini beraksi, saya akan menyimpan di sini dan belum ada yang terjadi. Tapi perhatikan saja apa yang terjadi jika saya mengetik sesuatu di sini dan menekan kirim ke CEO. Teksnya masih di tempatnya. Nah, itulah tepatnya yang ingin kami lakukan

Jadi saya akan menekan simpan dan kemudian perilaku yang diharapkan jika Anda pernah mengetik di kotak komentar atau kotak obrolan atau apa pun adalah saat Anda menekan kirim. Itu harus membersihkannya. Dan hanya itu yang dilakukan baris ini sekarang. Satu pertanyaan yang mungkin Anda miliki dan itu pertanyaan yang bagus adalah mengapa Anda tidak bisa menggunakan variabel input obrolan ini saja?

Jadi jika Anda mengambil input obrolan ini di sini, Anda mengatakan itu adalah input obrolan dan kemudian nilainya sama dengan string kosong maka itu tidak akan berhasil. Dan itu karena Anda hanya menyetel string itu menjadi kosong. Kami ingin mengambil seluruh kotak input itu sendiri. Sekarang cara lain untuk melakukan ini jelas adalah dengan menghasut input obrolan bukan mengambil nilai dan mengembalikan seluruh simpul DOM tetapi kemudian Anda harus memanggil nilai dari sini

Jadi saya lebih suka mengatakan bahwa saya ingin mengambil input obrolan itu pada tahap ini dan kemudian menghapusnya. Jadi sekarang mari kita pindah ke sini dan saya akan menambahkan sedikit persyaratan. Jadi katakanlah

  
  



  

    
    Submit
    
  

Jadi dalam hal ini saya ingin menugaskan kembali chatWrapper, itulah sebabnya saya membuat variabel let. Saya akan mengatakan document dot query selector all lalu ubah ke chatMsg lalu ambil yang pertama yang mungkin terlihat sedikit aneh bagi Anda. Saya akan menunjukkan kepada Anda sebentar lagi mengapa itu perlu. Jadi turunlah sehingga Anda dapat melihat lebih banyak ruang dan sekarang kita akan benar-benar menerapkannya. Jadi sekarang inilah yang membuatnya bekerja

Oke, selama saya tidak salah ketik, saya yakin ini akan berhasil di sini. Jadi mari kita ketik pesan pertama. Sekarang tidak akan berfungsi jika Anda masuk karena kami tidak memiliki pendengar untuk penekanan tombol, Anda sebenarnya harus mengklik kirim. Anda dapat melihat bahwa itu berhasil. Sekarang kami memiliki sedikit masalah dengan di mana tombol itu berada, tetapi kami dapat memperbaikinya sebentar lagi. Jadi pesan kedua dan tekan kirim lagi

Anda dapat melihat bahwa pesan kedua masuk dan berfungsi dengan baik. Jadi semua ini ditambahkan sekarang. Seperti yang Anda lihat sisipkan sebelum benar-benar menyisipkannya sebelum elemen ini mari kita buat elemen div kosong di sini yang ingin kita sisipkan sebelumnya. Jadi izinkan saya membuat div dan kami akan menyebutnya hanya pembungkus obrolan seperti ini

  
  



  

    
    Submit
    
  

Ini harus memperbaiki masalah tombol kecil kami. Jadi saya akan datang ke sini. Pesan pertama tekan kirim. Dan itu berhasil. Satu lagi dan yang satu itu bekerja. Jadi semua ini bekerja yang fenomenal. Saya suka cara Anda melakukan ini. Sekarang, ini dulunya jauh lebih sulit di JavaScript tetapi di versi paling modern, ini menjadi jauh lebih mudah. Dan mari kita pergi dan biarkan saya benar-benar merentangkan ini sedikit agar lebih mudah dilihat

Sekarang saya ingin Anda memperhatikan apa yang terjadi di sini di DOM karena ini mungkin hal terpenting tentang keseluruhan panduan ini. Perhatikan di sini bagaimana kami memiliki kelas chatMsg yang ditambahkan. Apa yang terjadi ketika saya mengatakan yang ketiga di sini. Jika saya menekan kirim. Anda dapat melihat item ketiga telah ditambahkan. Dan ini dulunya tidak ada di sini

Kami tidak melakukan apa yang telah kami lakukan sebelumnya di mana kami memiliki elemen di sana dan itu hanya disembunyikan menggunakan CSS dan kemudian kami mengaktifkan kelas untuk menunjukkannya di sini benar-benar menghasilkan elemen div baru dengan cepat. Jadi inilah hal yang ingin Anda lakukan jika Anda membuat aplikasi obrolan lengkap atau aplikasi komentar atau semacamnya di mana Anda perlu menambahkan elemen secara dinamis ke halaman dan juga perhatikan bahwa kami memiliki

Jadi jika Anda melakukan ini dan seperti yang saya sebutkan sebelumnya saya memasukkan ini ke sana bukan karena itu perlu kita tidak harus memasukkannya tetapi bayangkan sebuah skenario di mana pesan obrolan memiliki semacam gaya. Jadi itu memiliki beberapa tema yang ingin Anda tambahkan ke yang lain sebagai warna latar belakang perbatasan seperti itu Anda dapat melakukannya karena di sini Anda tidak akan hanya menambahkan div kosong Anda sebenarnya dapat menambahkannya dengan atribut apa pun saja

Jadi jika Anda melihat strukturnya di sini, Anda dapat melihat bahwa kami memiliki widget kami. Kami memiliki masukan kami di tombol kami. Sekarang yang ini dan kemudian Pembungkus obrolan ini yang saya taruh di sini di bagian paling akhir. Sekarang masing-masing ada di sana ketika kami mulai. Kemudian semua elemen lain inilah yang ditambahkan sesudahnya. Sekarang saya akan mengecilkan ini sehingga kita bisa melihat semuanya lagi

Dan mari kita bicara tentang persyaratan ini karena ini mungkin salah satu bagian yang lebih membingungkan dari keseluruhan program dan saya akan mengomentarinya sehingga Anda dapat melihat apa yang akan terjadi jika tidak ada. Jadi saya akan menutup ini dan mengatakan pesan ini yang pertama dan yang ini yang kedua sekarang. Perhatikan bagaimana perilaku kita telah berubah. Jika Anda ingat kembali ke contoh pertama itu setiap kali kami menambahkan pesan baru, itu muncul di atas dan kemudian semua pesan lainnya hanya dipindahkan ke bawah

Dan dalam banyak kasus itulah perilaku yang Anda inginkan. Dan alasan saya melakukannya dalam panduan ini adalah agar Anda dapat melihat bagaimana Anda dapat melakukannya dengan cara apa pun karena salah satu hal yang paling membingungkan (setidaknya bagi saya ketika saya mempelajari cara melakukan ini) adalah menemukan bagaimana saya dapat mengontrol di mana sebuah

Pembungkus obrolan kami di sini masih di atas dan itulah perilaku yang dimiliki JavaScript dan div baru kami ditambahkan di sana. Jadi jika Anda ingin meniru perilaku dari apa yang kami miliki di mana item terbaru tetap berada di atas yang menurut saya sedikit lebih alami jika Anda membuat semacam aplikasi obrolan. Maka Anda perlu melakukan kondisional

Jadi yang saya lakukan di sini adalah saya memeriksa untuk melihat apakah ada pesan obrolan yang ada di halaman dan saya melakukannya dengan menjalankan pemilih kueri dan berkata, "Oke, periksa pesan obrolan dan kemudian jika panjangnya lebih dari 0. Lalu yang saya ingin Anda lakukan adalah mengganti chatWrapper itu dan menyetelnya ke chatMsg terbaru". Jadi apa yang dilakukan ini adalah jika kita memiliki kelipatan di sini jadi saya punya yang pertama dan kemudian yang kedua apa yang dilakukannya

Setiap kali fungsi ini berjalan, ia akan memeriksanya. Melalui setiap pesan jika tidak dapat menemukan pesan apa pun maka menggunakan placeholder kosong itu menggunakan chatWrapper yang kami buat. Dan kemudian jika itu menemukan sama sekali selama jumlah itu lebih besar dari 0 itu menugaskan kembali chatWrapper ke pesan terakhir dan kemudian menyisipkannya sebelum itu

Jadi sekarang semua div baru kemudian akan ditempatkan di bagian paling atas dan itulah yang menurut saya mungkin merupakan perilaku yang paling diharapkan. Jadi begitulah cara Anda membangun seluruh fungsi yang memungkinkan Anda membuat HTML dengan cepat dengan Javascript

Bagaimana cara menghapus elemen HTML secara dinamis dalam JavaScript?

Bagaimana cara menghapus div secara dinamis di JavaScript?

Bagaimana cara menghapus elemen yang ditambahkan dalam JavaScript?

Bagaimana Anda menghapus elemen dalam JavaScript?