How to remove contents of elements using jQuery ?

How to count child element using jQuery ?

Last Updated : 27 Apr, 2020

It is very simple to count the number of child elements in the HTML file using jQuery. For example: If you have a parent element consisting of many children elements then you can use .length or.children().length method as given below. Syntax:

var len=$("#parentID").length;

or

var count = $("#parentId").children().length;

Example 1:

html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Count child elements using Jquery</title>
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
</head>

<body>
    <div id="parentID">
        <p>Red</p>
        <p>White</p>
        <p>Green</p>
        <p>Black</p>
        <p>Blue</p>
        <p>Orange</p>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"
integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" 
        crossorigin="anonymous">
    </script>

    <script>
             
        // Here we count the child element in parentID
        var count = $("#parentID p").length;
        document.writeln(count);
    </script>
</body>

</html>

Output:

Example 2:

html

<!DOCTYPE html>
<html>

<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>Count child elements using  jQuery.</title>
   <script src=
      "https://code.jquery.com/jquery-3.4.1.js">
    </script>
</head>

<body>
   <div id="parentId">
   <ul>
      <li>1 child</li>
      <li>2 child</li>
      <li>3 child</li>
      <li>4 child</li>
      <li>5 child</li>
    </ul>
    </div>
    <script>
         var count = $("#parentId ul").children().length;
         document.writeln(count);
    </script>
</body>

</html>

Output:

How to remove contents of elements using jQuery ?

_tanya_sri_

Improve

Article Tags :

Similar Reads

How to count all elements within a div using jQuery ?

In this article, we will count all elements inside a div element using jQuery. To count all elements inside a div elements, we use find() method and length property. The find() method is used to find all the descendant elements of the selected element. It will traverse all the way down to the last l

How to change the element id using jQuery ?

The jQuery methods are used to change the element ID which are described below: jQuery attr() Method: This method set/return attributes and values of the selected elements. If this method is used to return the attribute value, it returns the value of first selected element. If this method is used to

How to check an element contains a class using jQuery?

Method 1: Using hasClass() method: The hasClass() is an inbuilt method in jQuery which check whether the elements with the specified class name exists or not. It returns a boolean value specifying whether the class exists in the element or not. This can be used to check for multiple classes. Syntax:

How to remove contents of elements using jQuery ?

In this article, we will discuss how to remove the contents of the elements using jQuery. To remove the contents of elements, we will use the empty() method and the remove() method. The jQuery empty() method is used to remove all child nodes and their content for the selected elements. This method d

How to filter the children of any element using jQuery ?

In this article we will learn how to filter the children of any element in JQuery. JQuery is a fast and lightweight JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. It is widely famous for its motto o

How to apply css property to a child element using JQuery?

The task is to apply CSS property to a child element using jQuery. To do that, first we select the child element with the help of children() method in jQuery and then apply CSS property to it with the help of css() method in jQuery. Syntax: // Note : children method selects the direct child to paren

How to display div elements using Dropdown Menu in jQuery?

In order to display data/content of a specific element by selecting the particular dropdown menu in jQuery, we can use the with following ways: Using hide() and show() methods: hide() methods : This method is used to hiding the syntax or the element of html that you want to hide. Syntax: $(selector)

How to check an HTML element is empty using jQuery ?

Given an HTML document and select an element from the HTML document and check that element is empty or not. There are two methods used to solve this problem which are discussed below: Method 1: Using the ":empty" selector: The element to be checked using is() method. The is() method is used to check

How to find the class of clicked element using jQuery ?

In this article, we will find the class of the clicked element using jQuery. To find the class of clicked element, we use this.className property. The className property is used to set or return the value of an elementâ€™s class attribute. Using this property, the user can change the class of an eleme

How to get specific number of child elements using CSS?

The :nth-child() CSS pseudo-class is used to style elements based on their position in a parent element's child list. This selector allows you to target elements in a specific position or match them based on patterns such as odd or even positions, or by using a linear equation.Syntax:element:nth-chi