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().