How to select an element in JS | select complex element in JavaScript | Advance javascript tutorials

You can select the specific element from the HTML through vanilla javascript So please review the code and watch the video for details explanation

How to select an element in JS | select complex element in JavaScript | Advance javascript tutorials

	<!doctype html>
	<html lang="en">
	<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

	<title>Hello, world!</title>
	</head>
	<body>
	<h1>Hello, world!</h1>
	<table class="table table-dark">
	<thead>
	<tr>
	<th scope="col">#</th>
	<th scope="col">First</th>
	<th scope="col">Last</th>
	<th scope="col">Handle</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<th scope="row">1</th>
	<td>Mark</td>
	<td>Otto</td>
	<td>@mdo</td>
	</tr>
	<tr>
	<th scope="row">2</th>
	<td>Jacob</td>
	<td>javascript</td>
	<td>@fat</td>
	</tr>
	<tr>
	<th scope="row">3</th>
	<td>Larry</td>
	<td>the Bird</td>
	<td>@twitter</td>
	</tr>
	</tbody>
	</table>

	<!-- Optional JavaScript -->
	<!-- jQuery first, then Popper.js, then Bootstrap JS -->
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
	<script>

	element = document.querySelector('body > table > tbody > tr:nth-child(2) > td:nth-child(3)');
	element.style.color="red";
	element.style.background="white";
	console.log(element);
	</script>
	</body>
	</html>

How to dynamically Add and remove a field or tag in vanilla JavaScript | Advance JavaScript tutorials

https://youtu.be/0mPJD9uVsxQ

	<!doctype html>
	<html lang="en">
	<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

	<title>Hello, world!</title>
	</head>
	<body>
	<div class="container">
	<h1>Add Field Dynamically through vanilla javascript</h1>
	<div class="addFieldDynamically"> </div>
	</div>

	<!-- Optional JavaScript -->
	<!-- jQuery first, then Popper.js, then Bootstrap JS -->
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
	<script>
	var idNumber=1;

	selector= document.querySelector("body > div > div.addFieldDynamically");
	selector.innerHTML="<table id='tableThroughJvascript'><tr><td><button class='btn btn-primary' id='addNewRow'>Add</button></td>\
	</tr></table>";
	function addFieldDynamically()
	{
	newTrElement=document.createElement("tr");
	newTrElement.setAttribute("id", "dynamicRow"+idNumber+"'");
	newTrElement.innerHTML="<td><select class='form-control' id='country"+idNumber+"'><option valve='IN'>India</option><option value='USA'>United State</option></select></td>\
	<td><button class='btn btn-danger' onclick='removeRow(this)' id='countryButton"+idNumber+"'>Remove</button></td>"
	document.getElementById('tableThroughJvascript').append(newTrElement);
	idNumber++;
	}
	document.getElementById('addNewRow').addEventListener("click", myFunction);
	function myFunction()
	{
	addFieldDynamically();
	}

	function removeRow(el)
	{
	console.log(el.parentElement.parentElement);
	el.parentElement.parentElement.remove();
	}
	</script>
	</body>
	</html>