Cara Menghilangkan Element Child Menggunakan Javascript

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.

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.

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

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.

Cara Menghilangkan Element Child Menggunakan Javascript

Kategori