How to Dynamically Remove HTML Input Text Field in JavaScript

Submitted by razormist on Wednesday, May 10, 2023 - 23:16.

How to Dynamically Remove HTML Input Text Field in JavaScript

Introduction

In this tutorial we will create a How to Dynamically Remove HTML Input Text Field in JavaScript. This tutorial purpose is to teach you how to remove textbox dynamically. This will cover all the important functionality that allow you to remove HTML input text field in dynamic way. I will provide a sample program to show the actual coding of this tutorial.

This tutorial is simple and easy to understand just follow the instruction I provided and you can do it without a problem. This program can be use to any system or application if you want to remove any input field. I will give my best to provide you the easiest way of creating this program Remove Input Text Field. So let's do the coding.

Before we get started:

Here is the link for the template that i used for the layout design https://getbootstrap.com/.

Creating The Interface

This is where we will create a simple interface for our application. This code will only display the html form and the buttons. To create this simply copy and write it into your text editor, then save it as index.html.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
		</div>
	</nav>
	<div class="col-md-3"></div>
	<div class="col-md-6 well">
		<h3 class="text-primary">How to Dynamically Remove HTML Input Text Field</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<div class="col-md-6">
			<h2>Input Text Fields</h2>
			<br />
			<form>
 
				<div class="form-inline" id="input-1">
					<input type="text" class="form-control" placeholder="Enter firstname" name="form[]"><button type="button" class="btn btn-danger btn-sm" onclick="removeInputField(1);">Remove</button>
					<br /><br />
				</div>
				<div class="form-inline" id="input-2">
					<input type="text" class="form-control" placeholder="Enter lastname" name="form[]"><button type="button" class="btn btn-danger btn-sm" onclick="removeInputField(2);">Remove</button>
					<br /><br />
				</div>
				<div class="form-inline" id="input-3">
					<input type="text" class="form-control" placeholder="Enter address" name="form[]"><button type="button" class="btn btn-danger btn-sm" onclick="removeInputField(3);">Remove</button>
					<br /><br />
				</div>
				<div class="form-inline" id="input-4">
					<input type="text" class="form-control" placeholder="Enter occupation" name="form[]"><button type="button" class="btn btn-danger btn-sm" onclick="removeInputField(4);">Remove</button>
					<br /><br />
				</div>
				<div class="form-inline" id="input-5">
					<input type="text" class="form-control" placeholder="Enter civil status" name="form[]"><button type="button" class="btn btn-danger btn-sm" onclick="removeInputField(5);">Remove</button>
					<br /><br />
				</div>
			</form>
		</div>
	</div>
<script src="script.js"></script>	
</body>	
</html>

Creating JavaScript Function

This is where the main function of the application is. This code will dynamically remove input text field when the button is clicked. To do this just copy and write these block of codes inside the text editor and save it as script.js.

var counter=5;
 
function removeInputField(id){
	var inputId = "input-"+id;
	var input = document.getElementById(inputId);
	input.parentNode.removeChild(input);
	counter--;
	if(counter==0){
		window.location="index.html";
	}
}

This code will only create one method to remove HTML input field called removeInputField(). This function will allow the user to remove the Input Text field by clicking the button in the row. The code is consist of several variable bindings and setting the id for the input. To remove the input text field we use the special function called parentNode.removeChild() and passing the target input text field into it.

Output:

The How to Dynamically Remove HTML Input Text Field in JavaScript source code that I provide can be download below. Please kindly click the download button.

There you have it we successfully created How to Dynamically Remove HTML Input Text Field in JavaScript. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!

More Tutorials for JavaScript Language

JavaScript Tutorials

Add new comment

331 views

How to Dynamically Remove HTML Input Text Field in JavaScript