Home » JQuery

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,


<html lang="en">

    <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>

        body {
            background: linear-gradient(#ffe57f, #ffc400);
        .card-image img {
            height: 200px;
            width: 200px;
    var id = 0;

    <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>



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



JQuery DOM Example

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

        <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?



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

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



    <div class="container">

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



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

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.



    <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,



	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.



JQuery DOM Example

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



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

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



    <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!

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.