Hiding and removing a form can be done with the jQuery JavaScript library. We use jQuery hide() or remove() function to hide and remove a form.
Difference between jQuery hide() and remove() function
jQuery hide() - If you use the hide() function, it adds display none inline CSS to the form or div block using an id or class name. You can easily check the form code by inspecting elements in the browser.
jQuery remove() - The remove() method is used to remove form code. You cannot see the form code by inspecting elements. It removes the whole div block, and form block where you have given the id or class name.
You can display a message using jQuery html() or append() methods-
Let's remove the HTML form and display a message.
<!DOCTYPE html>
<html>
<head>
<title>Hide or remove a form and display a message in jQuery</title>
</head>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit_btn").click(function(){
$("#my_form").remove();
$("#message").html("Thank you for message.We will reply you soon/shortly.");
});
});
</script>
<body>
<p id="message"></p>
<form action="" id="my_form">
Name:
<input type="text" name="name" id="name"><br>
Email:
<textarea name="email" id="email"></textarea><br>
Message:
<textarea name="address" id="address"></textarea><br>
<button type="button" name="submit_btn" id="submit_btn">Submit</button>
</form>
</body>
</html>
In the above example, we have created a form with an id. You can use jQuery hide() method like this -
$("#my_form").hide();
Execute the above code and click on submit button. You will get an output - The form will remove or hide and display a message using the jQuery JavaScript library.
You can reset all form fields with a button click in jQuery. In this way, you can hide or remove a form using jQuery.
