JQuery DOM

In this article, we will see how to manipulate the DOM, updating, removing elements and traversing the DOM using the child-parent relationships in JQuery?
Submitted by Siddhant Verma, on November 18, 2019

Let's create a simple application that displays a list of your upcoming exams,

index.html:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <title>schedule</title>
    <style>
        body {
            background: linear-gradient(#ffe57f, #ffc400);
        }
        
        .card-image img {
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<script>
    var id = 0;
</script>

<body>
    <div class="container">
        <h2 class="center title">Exam Schedule</h2>
        <div class="container">
            <ul class="collection center #ffff8d" id="subject-list">
                <h4 class="subject-name"><li class="collection-item ">English</li></h4>
                <h4 class="subject-name"><li class="collection-item ">Maths</li></h4>
                <h4 class="subject-name"><li class="collection-item ">Physics</li></h4>
                <h4 class="subject-name"><li class="collection-item ">Chemistry</li></h4>

            </ul>
        </div>

    </div>

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

</html>

Output

Let's see how the DOM Tree would like for this application?

<h2>
    <div>
        <ul>
        <h4> <h4>	<h4>	<h4>
        <li> <li> <li> <li>

<h2> is the sibling of the <div> which has a children <ul> which has 4 children, the <h4> each containing a child <li>. All these <h4> share a sibling relationship with each other. Let's see how to traverse the DOM using this DOM relationship?

    console.log($('h2')[0]);

Output

    <h2 class="center title">Exam Schedule</h2>

We can traverse from the title to our <ul> by calling the sibling method,

    console.log($('h2').siblings()[0]);

Output

    <div class="container">
        ...
    </div>

The siblings() method gets us all the siblings of that element which is a single <div> element.

    console.log($('h2').siblings().children()[0]);

Output

    <ul class="collection center #ffff8d" id="subject-list">
        ...
    </ul>

The children() method returns us all the children of that element. So now we're on the <ul> and we can further access the <h4> by calling the children method again.

    console.log($('h2').siblings().children().children()[0]);

Output

    <h4 class="subject-name"><li class="collection-item ">English</li></h4>

Notice how we only get the first child element because this method only taverses down the DOM one level. If we target the <ul> directly we can get all the children using the children() method,

    console.log($('#subject-list').children());

Output:

	k.fn.init(4) [h4.subject-name, h4.subject-name, h4.subject-name, h4.subject-name, prevObject: k.fn.init(1)]
	0: h4.subject-name
	1: h4.subject-name
	2: h4.subject-name
	3: h4.subject-name
	length: 4
	prevObject: k.fn.init [ul#subject-list.collection.center.#ffff8d]
	__proto__: Object(0)

Let's say you're done with the Maths paper and want to remove this item from the list.

    $('#subject-list').children()[1].remove();

Output

You can remove an element from the DOM using the remove() method.

    console.log($('#subject-list').parent());

Output

    k.fn.init [div.container, prevObject: k.fn.init(1)]

Thus we can traverse upwards the DOM using the parent() method.

    console.log($('#subject-list').children().first()[0]);
    console.log($('#subject-list').children().last()[0]);

Output

    <h4 class="subject-name"><li class="collection-item ">English</li></h4>
    <h4 class="subject-name"><li class="collection-item ">Chemistry</li></h4>

We can also use some filter methods like first() and last() to get the first and last elements of that collection.

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples