Showing posts with label JQUERY empty() method. Show all posts
Showing posts with label JQUERY empty() method. Show all posts

Jquery empty() method

The empty() method removes all child nodes and content from the selected elements.This method does not remove the element itself, or its attributes.

Note -1: To remove the elements without removing data and events, use the detach() method.
Note -2: To remove the elements and its data and events, use the remove()  method.

Syntex:


$(selector).empty()


Example:1 

<!DOCTYPE html>

<html>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script>

$(document).ready(function(){

    $("button").click(function(){

        $("div").empty();

    });

});

  </script>

</head>

<body>


  <div style="height:100px;background-color:yellow">

    This is text that i want to remove

    <p>This is a paragraph inside the div.</p>

  </div>


  <p>This is a paragraph outside the div.</p>


  <button>Remove content of the div element</button>


</body>

</html>