Javascript & DOM #10 - DOM Traversal

[@zAkezONe]

8:00 beda cara tapi sama-sama berhasil const closed = document.querySelector('.close'); const hidden = document.querySelector('.container'); closed.addEventListener('click', function() { hidden.setAttribute('hidden', ''); }); chanel terbaik emang

[@reksamohammad6941]

apakah jika kita menulis e.target.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.style.display = 'none'; laptop kita akan menghilang? engga pak, saya bercanda. sukses terus buat channel ini, sangat membantu sekali buat temen - temen belajar ilmu programming. Terimakasih pak dhika.

[@m.jamilrahman4971]

body

[@farsikogama6114]

haha

[@ilhamprabuzakys]

programmer joke :>

[@drichas7270]

inet provider : ' are u kidding me ?? '

[@dlist6132]

Anda sukses membuat saya tertawa 😂

[@muhammadadekurnia4207]

Ini Channel Pemrograman Web Terbaik menurut saya 😍

[@kaumborjuis8953]

efektif dengan kata lain tidak perlu mendeklarasi setiap node, berguna banget nih pak

[@iketutjaya4597]

Saya gak mau ketinggalan videonya pak... 👍👍

[@iko1164]

Saya selalu menunggu vidio berikutnya Alnya keren dan mudah dimengerti

[@NGprime]

Mantap kang dika channel nya, udah setahun lebih ngikutin, mau share dikit kang, cara menghapus card let container = document.querySelector(".container"); container.addEventListener("click", function(e){ if(e.target.classList.contains("close")){ e.target.parentElement.remove(); } }); Salam (jangan lupa titik koma) :)

[@ariosetiawan173]

sebelumnya juga aku lakuin ini waktu pause moment :D

[@joelhkbn]

script ini ringkas dan efisien sekali.. makasih utk ilmunya..

[@ridhoaditya8841]

Yap bener saya juga pake remove()

[@fajrie9396]

Keren . .di tunggu yg selanjutnya

[@muhyiddienrabbani7117]

mantap bapak, inshaAllah berkah

[@IGEDEWICAKSANA]

pak Dika, video sebelum koding dong. Misalnya waktu ngedesign, merancang, persiapan tool(library, database, framework, dll),dan lain lain biar engga asal koding. Tapi sebelumnya, terima kasih banyak buat video tutorialnya

[@hilmanfirdaus7139]

juaraa pisann

[@hamidtrend1155]

kereen pak dika, sharing cara konsep belajar pemrograman dong pak dika, sering latihan tapi perasaan ngga semudah pak dika yah, hehe

[@sapiqiuchannel4289]

javaScript luarbiasa yaaaa...

[@luisly3187]

Pak dika, mungkin saya emg uda telat banget. Maaf tp saya ad beberapa saran untuk video bapak kedepannya supaya semakin mudah dimengerti termasuk oleh saya sendiri. Saran saya adalah kalau biasa dibagian penutup diberi kesimpulan atau penegasan kembali pak. Seperti contoh video diatas. misal kenapa kita menggunakan dom transversal? Knp ga langsung aj kita seleksi parentnya? Mungkin dikesimpulannya bisa dijelaskan bahwasannya " Keduanya emang benar tapi lebih efektif dan benar kalau menggunakan cara ini" . Terima kasih pak 👏. Semoga bisa terbaca pak dhika karna ni video da 4 tahun yg lalu hehe. Note : komen ini dari saya pribadi karna saya keasikan denger penjelasan pas diakhir video eh lupa apa bedanya hehe

[@khalifahhafidh9613]

mmmm saya rasa sebenernya dibanding dengan dosen atau pengajar yang lain bagi saya bapak dhika sudah sangat jelas dan baik hati yang mana ilmu yang bapak dhika share secara gratis. jadi rasanya kalau kita meminta lebih bnyak rasanya kurang tepat. kalau saya biasanya akan mencatat apa yang penting dari perkataan bapak dhika dengan cara mempause dimana kata kata yang perllu dicatat dan diulang ulang aja videonya. sekedar sharing sih. terima kasih bapak sudah membantu orang seperti kami yang sedang berusaha menuntut ilmu

[@michaelsimbolon5366]

mantap Pak, walaupun makin kompleks tpi berasa keren tambahan buat viewers, buat menggunakan browser yang terupdate agar tidak eror

[@mohammadsjauhary9165]

Mantap pak, biasanya pake jquery ternyata kode aslinya seperti itu

[@rudynisanr8694]

Wah mantap pak dika

[@coheng.11]

semangat terus bikin video nya pak dosen,, 💪💪💪

[@ifanzalukhu97]

pak dosen request Nodejs & Express dong

[@ahmadnurarifin4914]

mantap pak . saya mahasiswa akuntansi . tapi lebih suka coding . lanjutkan trus berbagi informasi nya pak

[@buayadarat7860]

Keren bang, saya juga teknik mesin bg

[@joshuaimmanuel9407]

let container = document.querySelector('.container'); let card = document.querySelector('.card'); let tombolX = document.querySelector('.close').addEventListener('click',function(){ container.removeChild(card); }); yg buat menghapus card

[@Ashkrik]

Hadir, sehat, maju, and suksess selalu...

[@adliroziqin868]

gandeng

[@nothought9750]

KERENNN

[@hanmuid9387]

Terima kasih pak. Semoga lancar terus urusannya. Amal jariyah nih :D

[@syawqiarroyan3606]

mantap pak

[@alzayrid8263]

kapan kapan main ke UNPAS ah, siapa tau ketemu Pa Dhika hehe

[@aksanraharjo]

Pak Dhika. Terima kasih ilmunya. Mohon pencerahan. Saya sedang mencoba membuat Sales Order. Disetiap baris ada 8 kolom. Isinya : 1. Nomor 2. Produk 3. Volume 4. Satuan 5. HJS (Harga Jual Satuan) 6. HJT (Harga Jual Total) 7. HMS (Harga Modal Satuan), dan 8. HMT (Harga Modal Total) Baris2 ini ditambahkan dengan mengklik tombol "+ baris" dan dikurangi dengan mengklik tombol "- baris. Ini saudah berhasil. Yang jadi masalah adalah : HJT = Volume x HJS HMT = Volume x HMS Saya mengunakan baris code ini : const hjs = document.querySelectorAll('.tbodyInput2'); const hms = document.querySelectorAll('.tbodyInput3'); for( let i = 0; i

[@alamsantikowibowo8624]

coba pake firebase untuk buat struktur datanya lebih mudah

[@khusnimubarok100]

const close = document.querySelector('.close'); close.addEventListener('click',function(){ const contain = document.querySelector('.container'); contain.remove(close) }); gini pak work

[@ahmadnurrizal225]

mantap pak, ty btw iklannya gak aku skipp bang heheee

[@tenangsantai02]

Alternatif lain : const closeItems = document.querySelectorAll(".close"); for (const item of closeItems) { item.addEventListener("click", (event) => { event.target.parentElement.remove(); }); }

[@shandybroom]

laravel dan eloquent nya ditunggu pak hehe

[@samanthatricia318]

23:16 nama.parentNode berarti harusnya juga spasi dong valuenya?

[@badcode8029]

nga kak, kalo parent langsung nunjuk siapa parentnya. kecuali kalo previousSibling mungkin hasilnya bakalan spasi dan enter

[@risanussy]

sensei>//

[@elisadoa8381]

Nuhun bang dika

[@leung_rasta]

forEach itu rekursif kan yaa biasa menggatikan looping / bukan yaa ?

[@FMATheQuiet]

Pak Dika klo Pak Dika musisi dah saya pajang poto pak Dika dan logo WPU nya di kamar saya, Pak Dika nya sebagai vokalis di suatu band bernama Web Programming Unpas

[@pemrogramandasar5528]

kalo pake perentElement kalo timbok X di click bener pak cardnya yang hilang cuman gimana menanggulangi user click bagian card jadinya kan isi dari containernya yang hilang?

[@yyirex]

izin bertanya pak, kalau dalam fungsi tadi yang paramaternya 'el' dan 'e' itu merujuk kemana ya? saya kurang paham

[@alimuqsith2239]

pa klo untuk looping dan fungsi addeventlistener di jquery gmna pa ??

[@ronnykn2108]

pak, kalau pakai SELAIN querySelector ketika X di click, gambar dan namaNomorHp masih ada, cuma DIV saja yg hilang kenapa ya?

[@rizwansetiawan7972]

Const Remove = document.querySelector('.perasaan'); Const klik =document.querySelector('.onklik', Remove.addEvenListener('click',function(){ Klik.style.display='none';)}

ooh... mirip mirip dengan lookup kah?

[@hwchannel5104]

maaf sedang belajar kenapa untuk forEach di teks editor vs code sekarang harus seperti ini keluar = document.querySelectorAll('.close'); keluar.forEach((keluar) => { keluar.addEventListener('click', function (e){ e.target.parentElement.style.display = 'none'; }); }); tidak bisa seperti pak dhika?

[@Putra-mg8yg]

variable close nya jgn di komentarin, yg ini const close = document.querySelectorAll('.close')

[@tarantulalabaz2294]

Terima kasih pak

[@nurPaujiana]

Pak punya saya toElemnent nya bernilai null, jadinya pas diolok malah ulang semua

[@anahdagussandi5432]

pak ada rencana bikin tutor node.js ngga ?

[@hasanbasri-bs9su]

Kenapa pas saya implementasi eror ya..pas saya cek console value dari none nya yang buat erorrr

[@syifanurlatifah]

Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. ({a}) pak kok saya ada tulisan ini, artinya apa ya?

[@LukmanulHakim_]

const hapus = document.querySelector('.close'); let kontak = document.querySelector('.card'); hapus.addEventListener('click',function(){ kontak.remove(); })

[@becakdarurat1367]

const x = document.getElementsByClassName('close')[0]; const container = document.getElementsByClassName('container')[0]; x.addEventListener('click',function(){ container.style.display = 'none'; }); gk nyangka sama dengan sama pak dika awowkk

[@S0da0DA]

.style.display = 'none' bisa diganti .remove() kan?

[@erizonadepratama4290]

Pak tutorial laravel dong

[@yusrila_]

#TANYAPADIKA pak dika lanjutin video php nya dong pak, kan video itu untuk pemula jadi pasti ada yang bukan pemulanya :) eak

[@fchannel9513]

Malam pak dhika, jika parent nya hanya satu gmna ya pak ? Terima kasih

[@harrypath6313]

Pak CI nya kapan yaa, klu boleh tw kita

[@herisetyawan3857]

Kasih tutorial bahasa python dong ,pingin bisa bikin tool sederhana sendiri soalnya biasanya copas mulu

[@kafkakhalis5494]

Cara membuat slider di web bagaimana pak dika ?

[@yogabenrc3631]

pa sandika apakah link source codenya bisa diperbarui ? soalnya tidak bisa di download

[@thoriqabdoel6940]

pak dika kok kalo saya add elemnt terus mau remove element pake cara pak dika ga bisa? saya ikutin cara add element di vidio ke 3 di playlistt ini

[@sandhikagalihWPU]

ada muncul error ga di console nya?

[@thoriqabdoel6940]

engga pak dika, cuma waktu mgapusnya doang ga bisa

[@FMATheQuiet]

Pak kenapa punya saya mah PointerEvent?

[@nailakhalida9151]

pak kenapa chrome saya tampilannya beda ya pak sama punya bapak, padahal sourcecodenya jg udh copas dr bapak ;(

[@azkiafairuz4801]

Bedanya gmn

[@azkiafairuz4801]

Posisi nya kah?

[@azkiafairuz4801]

Coba gabung grup discordnya terus tanya kirimin photonya juga

[@joshuamanuputty8120]

lapor pak dosen const card = document.getElementsByClassName("card")[0]; const close = document.getElementsByClassName("close")[0]; close.addEventListener('click', function(){ if(close.classList.contains("close")){ card.style.display = 'none'; } });

[@apayanamanyaadayangpunyaid9800]

Giman caranya biar tau posisi sebuah elemen/cordirnat nya gitu gimana caranya ya?

[@axelwangg]

itu ada di playlist ini yg sebelumnya, yg "DOM Events".

[@apayanamanyaadayangpunyaid9800]

@@axelwangg itu bukan nya mouse apa sama cara nya sama yang mouse?

[@kepaprogaming7609]

mas buat java scrip hitung nilai max dan min nya mas .

[@kangkoment100]

kok sama aja ya kayak panggil querySelector langsung ke id/class nya ?

[@ariosetiawan173]

benar tapi dalam hal ini pada kasus tertentu kita lebih mudah menggunakan fungsi2 traversal, agar tidak selalu menyeleksi satu persatu element yang dimaksud, cmiiw

[@ininamakokharusdijarak6815]

// Dom Travel

[@wibowomuhmmad]

day ke ga tau brapa wwkkw, learn DOM

[@irawatipayapo836]

menghilangkan card -> tahun 2024 const card = document.querySelector ('.container'); card.addEventListener('click', function (){ const close = document.querySelector ('.close'); card.remove('close'); })

[@agusprema06]

baang tau tooltip gak? kalo tau buat tutorialnya dong!

[@hanafiilham7081]

const close = document.querySelectorAll('.close'); close.forEach(function(btn) { btn.addEventListener('click', function() { btn.parentElement.remove(); }); });

[@guadownload9354]

for(let i = 0; i < close.length; i++){ close[i].addEventListener('click', function(){ }); pak, mohon pencerahannya. saya tidak mengerti. kalo tidak diklik kan pengulangannya sudah langsung habis, gmna ya pak?

[@neongenesis3574]

perbaiki cara bertanya dulu gan..

[@achmadjulian741]

Agak binggung nih, tapi ya emang bener, kan perulangan langsung dieksekusi

[@naufaltrisubakti4881]

mending fokus ke satu cara cara biar ga bingung dan belibett

[@vebe3381]

aneh gua jd cepet ngerti kalo gua nntn sambil maen game -__-

[@pattystealers5453]

mau tanya pak, bedanya pake ini : close.forEach(function(el){ el.addEventListener('click', function(){ el.parentElement.style.display = 'none' }) }) sama ini: close.forEach(function(el){ el.addEventListener('click', function(e){ e.target.parentElement.style.display = 'none' }) }) apa ya ?

[@ropikiropiki4895]

Tapi bagaimana cara install .html to .apk tolong buat tutorialnya😕

[@ashandileonadi6724]

PWA (Progressive Web Apps)

[@widibmth]

const deletes = document.querySelector('.close'); deletes.addEventListener('click', function(e) { const card1 = document.querySelector('.card'); card1.remove(); });

[@aslief9808]

const closeBtn = document.querySelectorAll(".close"); for (let i = 0; i < closeBtn.length; i++) { closeBtn[i].addEventListener("click", function () { closeBtn[i].parentNode.remove(); }); }

[@nabillaaaaa]

Terimakasih pak