empty()
empty() provides the ability to completely empty the contents of an element.
HTML
<div class="hello">hello world</div>
empty() will remove the hello world from the html source above
jQuery
$('.hello').empty();
If you execute the above function, the hello world of class hello will disappear.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>COREASUR :: jQuery Course</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
$('.hello').empty();
});
</script>
<style>
</style>
</head>
<body>
<div class="hello">hello world</div>
</body>
</html>
remove()
The above empty() provided only the function of emptying. In other words, the div tag remains and the content disappears?
Remove() removes the div tag from the html source above.
<div class="hello">hello world</div>
Remove() removes the div tag from the html source above.
CSS
.hello{border:3px solid yellow}
I apply css to show that the tag itself is gone.
jQuery
$('.hello').remove();
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>COREASUR :: jQuery Course</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
$('.hello').remove();
});
</script>
<style>
.hello{border:3px solid yellow}
</style>
</head>
<body>
<div class="hello">hello world</div>
</body>
</html>
val()
val() provides the ability to change the field value of text.
Input your name in the text box above can be changed with val().
HTML
<input type="text" class="text1" value="coreasur" />
jQuery
$('.text1').val('tomodevel');
If you apply jQuery above, value is changed as below.
Check out the examples and practice.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>COREASUR :: jQuery Course</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
$('.text1').val('tomodevel');
});
</script>
<style>
</style>
</head>
<body>
<input type="text" class="text1" value="coreasur" />
</body>
</html>
After finishing this course, we will learn about focus() and blur().