search

Cara menggunakan parent element javascript

1 years ago
Komentar: 0
Dibaca: 200

Element Child adalah elemen yang di bungkus oleh elemen lain seperti tag div yang membungkus tag p dimana tag p adalah sebagai child dan div sebagai parrent. Pada tutorial kali ini saya akan mencoba berbagi Cara Menghilangkan Element Child Menggunakan Javascript.

Show

Dalam kasus ini saya akan menggunakan salah satu tag dari html yaitu tag div dan p, dimana kita akan menghapus salah satu tag p yang berada dalam tag div. Ok, langsung saja saya akan memberikan langkah-langkah Cara Menghilangkan Element Child Menggunakan Javascript.

1. Pertama

Buka text editor anda lalu buat lembar file baru, dan  ketikan kode html di bawah ini.

<!DOCTYPE html>
<html>
<head>
	<title>removeChild</title>
</head>
<body>

	<input type="text" name="nama" id="fullname">
	<!--tambahkan onclick pada type submitnya unutk memproses fungsinya-->
	<input type="submit" id="submit" name="Submit" value="Submit" onclick="submit()">
	
	<div id="parent">
		<p id="error"></p>
		<p id="output"></p>
	</div>   

</body>
</html>

2. Kedua

Buat lembar kerja baru lagi untuk membuat proses perulangannya lalu keitkan kode javascript di bawah dan save dengan nama hilang.js

function submit(){
			var name = document.getElementById('fullname').value;
			var error = document.getElementById('error')//elemen p yang ber id error
			var output = document.getElementById('output')//elemen p yang ber id output

			if (name == "") {
				//jika name kosong maka elemen error akan tampil
				error.style.backgroundColor = "red";
				error.style.width = "200px";
				error.style.padding = "10px";
				error.style.color = "white";
				error.style.transition = "0.8s";
				error.style.transform = "rotateX(360deg)";
				error.innerHTML = "<span>Harus Mengisi Nama</span>";
			}else{
				
				var p = document.getElementById('parent');
				var e = document.getElementById('error');

				p.removeChild(e);//menghapus elemen child dengan id error bila kita menginput nama
				//jika name di-isi maka elemen output akan tampil
				output.style.backgroundColor = "lightblue";
				output.style.width = "200px";
				output.style.padding = "10px";
				output.style.color = "white";
				output.style.transition = "0.8s";
				output.style.transform = "rotateX(360deg)";
				output.innerHTML = "Nama Kamu Adalah "+"<strong>"+ name + "<strong>";
			}

		}

3. Ketiga

Ketiga kita hubungkan file js dengan file htmlnya

<script type="text/javascript" src="hilang.js"></script>

4. Keempat

Buka file html anda menggunakan browser yang ada pada komputer anda, maka apa bila kita mengklik submit tanpa mengisi inputan terlebih dahulu maka akan tampil pemberitahuan.

Cara menggunakan parent element javascript
Cara menggunakan parent element javascript

Coba teman-teman isikan dengan nama teman-teman lalu klik submit maka tag p yang berisi pemberitahuan tersebut akan di hapus dan di ganti oleh tag p yang berisi nama yang kita inputkan

Cara menggunakan parent element javascript
Cara menggunakan parent element javascript

Bagaimana cukup mudahkan dalam Cara Menghilangkan Element Child Menggunakan Javascript. Dengan javascript kita tidak hanya dapat melooping suatu elemen melainkan dapat juga memberikan animasi yang bagus untuk tampilan website kita.

Sekian tutorial tentang Cara Menghilangkan Element Child Menggunakan Javascript. Semoga bermanfaat bagi teman-teman.

Ada saat-saat di mana saya berharap dapat memilih elemen induk dengan CSS - dan saya tidak sendirian dalam masalah ini. Namun, tidak ada hal seperti itu sebagai Parent Selector dalam CSS, jadi itu hanya tidak mungkin untuk sementara waktu.

Dalam tutorial ini kami akan mulai melalui beberapa kasus dimana memiliki CSS parent selector mungkin berguna, bersama dengan beberapa workarounds yang memungkinkan. Mari kita mulai!

Tunggu, apa itu Parent Selector?

CSS penyeleksi memungkinkan kita untuk elemen target, bergerak ke bawah dan seluruh pohon DOM, mendapatkan lebih spesifik ketika kita melakukannya. Berikut adalah contoh jenis selector yang mungkin Anda temukan di Bootstrap - dimulai dari bawah turunan  DOM dari elemen 

.navbar-dark .navbar-nav .nav-item .nav-link {
15, ke 
.navbar-dark .navbar-nav .nav-item .nav-link {
16, 
.navbar-dark .navbar-nav .nav-item .nav-link {
17, lalu akhirnya tautan 
.navbar-dark .navbar-nav .nav-item .nav-link {
18.

1
.navbar-dark .navbar-nav .nav-item .nav-link {

2
    

3
}

Parent selector akan memungkinkan kita untuk perjalanan kembali ke DOM, menargetkan elemen parent hal-hal tertentu. Sebagai contoh, kita akan dapat menargetkan parent dari 

.navbar-dark .navbar-nav .nav-item .nav-link {
19 unsur-unsur dengan menggunakan:

1
.nav-link::parent {

2
3
}

Catatan: contoh ini adalah kode murni palsu, itu tidak ada dan tidak menyarankan sintaks mungkin yang terbaik!

Kasus 1: Styling warisan konten

Styling Konten Legacy, dengan tanggal markup dan struktur, merupakan tantangan klasik ketika mendesain ulang sebuah website. Sebelum HTML5, misalnya, gambar mungkin biasanya memiliki telah diselimuti dengan 

.navbar-dark .navbar-nav .nav-item .nav-link {
20, 
.navbar-dark .navbar-nav .nav-item .nav-link {
21, atau kadang-kadang dengan 
.navbar-dark .navbar-nav .nav-item .nav-link {
22 rentang bersama dengan 
.navbar-dark .navbar-nav .nav-item .nav-link {
20 bersarang yang digunakan untuk membungkus teks gambar. Tidak ada cara standar untuk membungkus gambar dan keterangan. Kemudian, kami mengadopsi unsur-unsur 
.navbar-dark .navbar-nav .nav-item .nav-link {
24 dan 
.navbar-dark .navbar-nav .nav-item .nav-link {
25, membuat struktur dokumen kami lebih semantik.

Cara menggunakan parent element javascript
Cara menggunakan parent element javascript
Cara menggunakan parent element javascript

Kami ingin gambar dari konten warisan muncul seperti di atas. Tapi karena mungkin ada lebih banyak tag 

.navbar-dark .navbar-nav .nav-item .nav-link {
21 dalam dokumen kami, orang-orang yang tidak berisi gambar, Deklarasi gaya berikut akan sangat tidak praktis.

1
.navbar-dark .navbar-nav .nav-item .nav-link {
2
2
.navbar-dark .navbar-nav .nav-item .nav-link {
4
3
.navbar-dark .navbar-nav .nav-item .nav-link {
6
.navbar-dark .navbar-nav .nav-item .nav-link {
7
.navbar-dark .navbar-nav .nav-item .nav-link {
8
.navbar-dark .navbar-nav .nav-item .nav-link {
9
}

2
1
2
2
2
3
2
4
2
5
}

2
7
2
8
2
9
0
1
2
3
4
5
6
7
}

Itu akan berlaku warna latar belakang, padding dan margin untuk semua elemen div dalam konten. Kami benar-benar ingin menerapkan gaya ini secara eksklusif untuk elemen 

.navbar-dark .navbar-nav .nav-item .nav-link {
21 yang membungkus gambar dan keterangan gambar.

Kasus 2: Menjaga Rasio Video

Contoh lain terlihat pada menjaga rasio video tertanam (seperti dari Youtube atau Vimeo), serta membuat video tak pasti . Hari ini, sebagian besar berkat kerja investigasi oleh Dave Rupert dan pals, diterima secara luas bahwa pendekatan yang terbaik adalah untuk menerapkan 

.navbar-dark .navbar-nav .nav-item .nav-link {
28 atau 
.navbar-dark .navbar-nav .nav-item .nav-link {
29 ke elemen parent.

Cara menggunakan parent element javascript
Cara menggunakan parent element javascript
Cara menggunakan parent element javascript
Potongan kode dari CSS-Trik: Fluid width video

Dalam dunia nyata, namun, kita mungkin tidak akan tahu elemen mana yang berisi video. Kita mungkin menemukan beberapa video tertanam yang dibungkus dalam sebuah 

.navbar-dark .navbar-nav .nav-item .nav-link {
21 atau 
.navbar-dark .navbar-nav .nav-item .nav-link {
20 tanpa nama pengenal kelas, sehingga sulit untuk memilih elemen tepat di mana untuk menerapkan gaya.

Oleh karena itu, menyatakan gaya sebagai berikut tidak lagi praktis karena hal itu akan mempengaruhi semua divs dalam 

.navbar-dark .navbar-nav .nav-item .nav-link {
32 termasuk yang mana saja tidak mengandung embedded video.

1
3
0
2
3
2
3
3
4
.navbar-dark .navbar-nav .nav-item .nav-link {
7
3
6
.navbar-dark .navbar-nav .nav-item .nav-link {
9
3
8
2
1
}

2
3
.navbar-dark .navbar-nav .nav-item .nav-link {
2
2
5
}
4
2
7
}
6
2
9
}
1
1
0
3
1
2
5
1
4
7
1
6
1
7
1
8
1
9
}

Alangkah indahnya jika langsung memilih elemem induk!

Kasus 3: Menanggapi Input Formulir

Dalam contoh ini kita memiliki bentuk dengan beberapa masukan. Ketika kita fokus pada salah satu masukan, diberikan warna perbatasan yang lebih menonjol, yang menyoroti posisi pengguna dalam bentuk.

Kadang-kadang Anda juga mungkin menemukan situasi yang mana tidak hanya perbatasan warna, tapi pembungkus elemen input disorot, membuat input bahkan lebih menonjol:

Cara menggunakan parent element javascript
Cara menggunakan parent element javascript
Cara menggunakan parent element javascript
Input form fokus.

Elemen parent mungkin 

.navbar-dark .navbar-nav .nav-item .nav-link {
21 atau 
.navbar-dark .navbar-nav .nav-item .nav-link {
20. Jadi, bagaimana kita bisa memilih elemen induk dengan tepat berdasarkan bagian tertentu dari turunannya?

Workarounds yang Memungkinkan

Seperti yang telah kita bahas, ada hal seperti parent selector, sehingga memilih induk tidak memungkinkan. Kita mungkin tergoda untuk menghindari masalah, dengan benar-benar mempertimbangkan kembali desain sehingga memilih induk terhindari. Tetapi jika itu tidak mungkin maka di sini adalah beberapa pendekatan yang potensial.

.navbar-dark .navbar-nav .nav-item .nav-link {
36 selector secara resmi disebut sebagai . hal ini mencocokkan elemen berdasarkan turunan mereka, yang didefinisikan antara kurung.

Dalam contoh berikut, berlaku 

.navbar-dark .navbar-nav .nav-item .nav-link {
37 untuk setiap 
.navbar-dark .navbar-nav .nav-item .nav-link {
21 yang berisi keterangan gambar. Ini tampaknya membahas kasus 1.

1
.nav-link::parent {
2
2
.nav-link::parent {
4
3
.nav-link::parent {
6
.navbar-dark .navbar-nav .nav-item .nav-link {
7
}

Atau, jika kita ingin lebih spesifik, kita dapat menulis ulang untuk mencocokkan setiap tag 

.navbar-dark .navbar-nav .nav-item .nav-link {
21 dengan 
.navbar-dark .navbar-nav .nav-item .nav-link {
40 sebagai direct langsung.

1
2
0
2
.nav-link::parent {
4
3
.nav-link::parent {
6
.navbar-dark .navbar-nav .nav-item .nav-link {
7
}

Selektor ini disusun untuk CSS Selector tingkat 4 meskipun browser belum menerapkannya. kami harus menunggu sedikir lebih lama sebelum pemilih ini terungkap Sampai saat itu, lihatlah kursus video berikut berjudul CSS masa depan untuk mengetahui bagaimana selector bekerja:

  • Memiliki Pseudo-Class
  • Menggabungkan: memiliki dan: tidak

Menggunakan jQuery Parent Selector

Tak ada solusi CSS tunggal yang dapat memperbaiki masalah kita di sini, jadi mari kita lihat apa JavaScript dapat lakukan untuk kita sebagai gantinya. Dalam contoh ini kita akan menggunakan jQuery untuk kompatibilitas api, kenyamanan, dan browser yang kuat. Pada saat penulisan, jQuery menyediakan tiga cara untuk memilih elemen parent.

.navbar-dark .navbar-nav .nav-item .nav-link {
41; metode ini memilih induk langsung dari unsur yang ditargetkan. Kita dapat memanfaatkan metode ini untuk mengatasi semua kasus penggunaan kami sebutkan sebelumnya dalam tutorial.

Cara menggunakan parent element javascript
Cara menggunakan parent element javascript
Cara menggunakan parent element javascript
Gambar struktur kandungan warisan.

Sebagai contoh, kami dapat menggunakan 

.navbar-dark .navbar-nav .nav-item .nav-link {
41 untuk menambahkan kelas khusus untuk elemen pembungkus gambar dalam konten.

1
2
8
2
3
0
3
3
2

Kode di atas akan memilih langsung elemen pembungkus gambar, terlepas dari jenis elemen, menambahkan class 

.navbar-dark .navbar-nav .nav-item .nav-link {
43 untuk memberi kita lebih banyak kontrol atas elemen seleksi dan gaya, sebagai berikut.

Cara menggunakan parent element javascript
Cara menggunakan parent element javascript
Cara menggunakan parent element javascript
Gambar struktur dalam warisan konten dengan kelas tambahan.

.navbar-dark .navbar-nav .nav-item .nav-link {
44 melihat bentuk plural dengan metode ini. Metode ini memungkinkan kita untuk memilih elemen parent dari cepat, sampai dengan akar dari dokumen, kecuali sebuah selector ditentukan sebagai argumen.

1
2
8
2
3
6
3
3
2

Diberikan contoh di atas, metode 

.navbar-dark .navbar-nav .nav-item .nav-link {
44 memilih sepanjang jalan dari tag 
.navbar-dark .navbar-nav .nav-item .nav-link {
21 yang segera membungkus gambar, 
.navbar-dark .navbar-nav .nav-item .nav-link {
21 berikutnya, dan akhirnya 
.navbar-dark .navbar-nav .nav-item .nav-link {
48, menambahkan 
.navbar-dark .navbar-nav .nav-item .nav-link {
43 kelas untuk semua elemen.

Cara menggunakan parent element javascript
Cara menggunakan parent element javascript
Cara menggunakan parent element javascript
Kelas telah-img-keterangan diterapkan dengan metode parents().

Terlalu berlebihan seperti itu. Satu-satunya unsur yang mungkin akan perlu memiliki kelas yang ditambahkan, dalam hal ini, adalah elemen 

.navbar-dark .navbar-nav .nav-item .nav-link {
21 segera. Maka kita lulus dalam metode argumen.

1
2
8
2
.navbar-dark .navbar-nav .nav-item .nav-link {
02
3
3
2

Di sini, metode 

.navbar-dark .navbar-nav .nav-item .nav-link {
44 yang akan melakukan perjalanan melalui gambar pohon leluhur ,memilih 
.navbar-dark .navbar-nav .nav-item .nav-link {
21 setiap ditemukan dan memberikan kelas 
.navbar-dark .navbar-nav .nav-item .nav-link {
53.

Jika itu masih terlalu memaksa, Anda dapat mempersempit pilihan ke satu elemen dengan menentukan indeks. Pada contoh berikut, kami menerapkan kelas hanya untuk 

.navbar-dark .navbar-nav .nav-item .nav-link {
21 pertama.

1
.navbar-dark .navbar-nav .nav-item .nav-link {
06
2
.navbar-dark .navbar-nav .nav-item .nav-link {
08

.navbar-dark .navbar-nav .nav-item .nav-link {
55; metode ini memilih hingga elemen induk tetapi tidak termasuk elemen yang ditentukan dalam kurung.

1
.navbar-dark .navbar-nav .nav-item .nav-link {
10
2
.navbar-dark .navbar-nav .nav-item .nav-link {
12
3
3
2

Mengingat kode di atas, itu akan berlaku class 

.navbar-dark .navbar-nav .nav-item .nav-link {
43 untuk semua elemen parent kecuali elemen dengan 
.navbar-dark .navbar-nav .nav-item .nav-link {
32.

Cara menggunakan parent element javascript
Cara menggunakan parent element javascript
Cara menggunakan parent element javascript

Dalam beberapa kasus, di mana Anda memiliki unsur-unsur trilyun bersarang, menggunakan metode 

.navbar-dark .navbar-nav .nav-item .nav-link {
55 lebih baik. Ini adalah comparably lebih cepat daripada metode 
.navbar-dark .navbar-nav .nav-item .nav-link {
44 seperti menghindari menggunakan jQuery mesin pemilih (mendesis) untuk perjalanan di seluruh DOM pohon hingga document root.

Merangkum

Apakah kita cendrung memiliki CSS Selector induk di beberapa titik di masa depan?

Mungkin tidak. Jenis selector induk yang telah kita bahas di atas telah diusulkan berkali-kali, tetapi itu tidak pernah lulus tahap rancangan W3C untuk beberapa alasan. Ini adalah sebagian besar dari browser, karena cara browser untuk menghargai dan merender laman. Hal terdekat yang akan kita miliki di masa depan adalah selector relasional, 

.navbar-dark .navbar-nav .nav-item .nav-link {
35.

Namun, karena 

.navbar-dark .navbar-nav .nav-item .nav-link {
35 belum berlaku, JavaScript dan jQuery saat ini merupakan pendekatan yang paling andal.  Ingat bahwa DOM Traversal adalah operasi yang dapat sangat penting kinerja perenderan situs Anda. Hindari menggunakan 
.navbar-dark .navbar-nav .nav-item .nav-link {
44 atau 
.navbar-dark .navbar-nav .nav-item .nav-link {
55 dengan operasi berat lainnya seperti 
.navbar-dark .navbar-nav .nav-item .nav-link {
64, 
.navbar-dark .navbar-nav .nav-item .nav-link {
65 atau 
.navbar-dark .navbar-nav .nav-item .nav-link {
66.

Lebih baik lagi, periksa struktur HTML bila mungkin untuk melihat apakah memilih elemen induk dapat dihindari sepenuhnya! 

Apa fungsi dari parent?

Fungsi parent (fungsi ke-2), adalah “pembantu” yang membantu fungsi dominan untuk mencapai kebutuhan dan tujuannya. Bekerja secara sadar, kamu mengandalkannya sebagai otoritas.

Apa itu parent node?

Sebuah simpul yang memiliki anak dinamakan simpul ayah (parent node) atau simpul leluhur (ancestor node) atau superior. Sebuah simpul paling banyak memiliki satu ayah. Tinggi dari pohon adalah panjang maksimal jalan ke sebuah daun dari simpul tersebut.

kode javascript

Pos Terkait

Cara menggunakan nama kelas dokumen javascript
Cara menggunakan nama kelas dokumen javascript

Cara menggunakan uppercase php
Cara menggunakan uppercase php

Cara menggunakan python getattr multiple levels
Cara menggunakan python getattr multiple levels

Apa saja tipe data dalam javascript?
Apa saja tipe data dalam javascript?

Cara menggunakan google sheets strip
Cara menggunakan google sheets strip

Apa itu font size css?
Apa itu font size css?

Excel 2007 tidak bisa diketik
Excel 2007 tidak bisa diketik

Periksa apakah daftar tidak ada python
Periksa apakah daftar tidak ada python

Cara menulis kubus dengan python
Cara menulis kubus dengan python

Sebutkan dan jelaskan yang membedakan modul dari program python umumnya.
Sebutkan dan jelaskan yang membedakan modul dari program python umumnya.

Periklanan

BERITA TERKINI

Cara menggunakan email html
1 years ago . by LegitimateSubcommittee
JavaScript substring first and last character
1 years ago . by UsualShopping
Bagaimana cara menjalankan tugas cron dalam skrip php?
1 years ago . by SerialSubscription
Php dan modul mysql pdf
1 years ago . by ShockingSwimmer
Print range list Python
1 years ago . by InspirationalCollaborator
Php dapatkan semua variabel lingkungan
1 years ago . by PrimaryIrrigation
Cara menggunakan dateiff postgresql
1 years ago . by PreviousLiner
Can you lock a Google sheet from editing?
1 years ago . by Double-breastedDollar
Bagaimana cara menambahkan data dari api ke google sheets?
1 years ago . by ExtensiveBingo
Bagaimana cara memasukkan skrip ke google sheets?
1 years ago . by MadStorey

Toplist Popular

#1
Top 7 rothenburg ob der tauber sehenswürdigkeiten stadtplan 2022
1 years ago
#2
Top 8 rufumleitung für bestimmte nummern android 2022
1 years ago
#3
Top 8 mündliche prüfung 2. staatsexamen jura bayern 2022
1 years ago
#4
Top 8 wenn kleinigkeiten am partner stören 2022
1 years ago
#5
Top 7 hilfsmittel für behinderte im alltag 2022
1 years ago
#6
Top 8 wann gilt lkw-fahrverbot in deutschland? 2022
1 years ago
#7
Top 7 wookie und copilot von han solo in star wars 2022
1 years ago
#8
Top 6 cafe da manha pobre 2022
1 years ago
#9
Top 7 bildung und teilhabe mühlhausen telefonnummer 2022
1 years ago
#10
Top 6 tiguan allspace 3 sitzreihe nachrüsten 2022
1 years ago

Periklanan

Terpopuler

Token Data

Periklanan

Tentang Kami

Legal

Dukungan

Social

homeentr
Copyright © 2024 kemunculan Inc.