Cara Menghilangkan Element Child Menggunakan Javascript
Element Child ialah unsur yang di bungkus oleh unsur lain seperti tag div yang membungkus tag p dimana tag p ialah selaku child dan div selaku parrent. Di panduan kali ini saya akan mencoba berbagi Cara Menghilangkan Element Child Menggunakan Javascript.
Pada kasus ini saya akan menggunakan diantara tag dari html yaitu tag div dan p, dimana kita akan menghapus diantara tag p yang berada pada tag div. Ok, seketika saja saya akan memberikan strategi Cara Menghilangkan Element Child Menggunakan Javascript.
1. Pertama-tama
Buka text editor sahabat lalu bikin 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 di 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
Bikin lembar kerja baru lagi bagi membangun 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')//unsur p yang ber id error
var output = document.getElementById('output')//unsur p yang ber id output
if (name == ) {
//jikalau name kosong karenanya unsur 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>Mesti Mengisi Nama</span>;
}else{
var p = document.getElementById('parent');
var e = document.getElementById('error');
p.removeChild(e);//menghapus unsur child dengan id error bila kita menginput nama
//jikalau name di-isi karenanya unsur 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 Yakni +<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 sahabat menggunakan browser yang terdapat di komputer sahabat, karenanya apa bila kita mengklik submit tanpa mengisi inputan terlebih dahulu karenanya akan tampil pemberitahuan.
Coba teman-teman isikan dengan nama teman-teman lalu klik submit karenanya tag p yang berisi pemberitahuan tersebut akan di hapus dan di ganti oleh tag p yang berisi nama yang kita inputkan
Bagaimana lumayan mudahkan pada Cara Menghilangkan Element Child Menggunakan Javascript. Dengan javascript kita tak hanya dapat melooping suatu unsur melainkan dapat pun memberikan animasi yang bagus bagi tampilan laman kita.
Demikianlah panduan mengenai Cara Menghilangkan Element Child Menggunakan Javascript. Semoga bermanfaat untuk teman-teman.
Sumber https://kursuswebsite.org
