Using jQuery, we can dynamically add and remove HTML attributes such as placeholder, style, and more to enhance the interactivity and functionality of web elements based on user actions. We will explore two different approaches to adding and removing HTML attributes with jQuery.
Below are the possible approaches to add and remove HTML attributes with jQuery:
Using attr() and removeAttr() Methods
In this approach, we are using jQuery's attr() method to dynamically add inline CSS styles to the target element, changing its color and font size based on user interaction. Similarly, we use the removeAttr() method to remove the inline styles, restoring the default appearance of the element.
Example: The below example uses attr() and removeAttr() Methods to add and remove HTML attributes with jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example 1</title>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>Using attr() and removeAttr() Methods</h1>
<button id="addAttrBtn">
Add Attribute</button>
<button id="removeAttrBtn">
Remove Attribute</button>
<br><br>
<div id="targetDiv" class="target">GeeksforGeeks</div>
</div>
<script>
$(document).ready(function () {
$("#addAttrBtn").click(function () {
$("#targetDiv").attr("style",
"color:green; font-size:24px;");
});
$("#removeAttrBtn").click(function () {
$("#targetDiv").removeAttr("style");
});
});
</script>
</body>
</html>
Output:
Using prop() and removeProp() Methods
In this approach, we are using jQuery's prop() method to dynamically add the placeholder attribute with text to the input field when the "Add Placeholder" button is clicked. Conversely, we use the removeAttr() method to remove the placeholder attribute from the input field when the "Remove Placeholder" button is clicked.
Example: The below example uses prop() and removeProp() Methods to add and remove HTML attributes with jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example 2</title>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>Using prop() and removeAttr() Methods</h1>
<input type="text" id="inputField"
style="margin-bottom:10px;" />
<br>
<button id="addAttrBtn">
Add Placeholder</button>
<button id="removeAttrBtn">
Remove Placeholder</button>
</div>
<script>
$(document).ready(function () {
$("#addAttrBtn").click(function () {
$("#inputField").prop("placeholder",
"Enter text...");
});
$("#removeAttrBtn").click(function () {
$("#inputField").removeAttr("placeholder");
});
});
</script>
</body>
</html>
Output:
