|
Note
remove() - this function remove the element,you can't see this element in html source of that page.
hide() - this function just hide the element,but you can see this element in html source of that page.
Example: 1 How to remove element, when click some element.
Related Topic:
empty() function used clear the content of an element.
Example: 2 How to clear element, when click some element.
|
Example: 1 How to remove element, when click some element <html>
<head>
<title>HTML-JQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function () {
$(".one").click(function () {
$(".two").hide();
});
$(".three").click(function () {
$(".four").remove();
});
});
</script>
</head>
<body>
<div class="one">one-Click here to hide next number</div>
<div class="two">two</div>
<div class="three">three-Click here to remove next number</div>
<div class="four">four</div>
</body>
</html> |
Example: 2 How to clear element, when click some element <html>
<head>
<title>HTML-JQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function () {
$(".one").click(function () {
$(".two").empty();
});
});
</script>
</head>
<body>
<div class="one">one-Click here to clear content shown below</div>
<div class="two">content going to clear</div>
</body>
</html> |
|
Example: 1 Demo
|
Example: 1 Html page source <!-- class two just hidden in the page, but class four removed from page -->
<body style="">
<div class="one">one-Click here to hide next number</div>
<div class="two" style="display: none;">two</div>
<div class="three">three-Click here to remove next number</div>
</body> |
|
Example: 2 Demo
|
Example: 2 Html page source <!-- After click the class one div the content from the class two removed-->
<body style="">
<div class="one">one-Click here to clear content shown below</div>
<div class="two"></div>
</body> |
