SH1804

Manipulating DOM Using jQuery

I. DOM and jQuery
 jQuery, as a JS resource library, can also manipulate the HTML DOM hierarchy.
 The process of DOM traversing is greatly simplified; jQuery can provide the same
functionality of the methods of properties that JS has for HTML DOM, but with less code.

II. Traversing

A. DOM Traversal

SoloLearn

 Certain methods in jQuery allow for selection of one (1) or all child or parent elements
in the DOM hierarchy.
 These methods can be used not only to traverse the elements within the DOM but also
manipulate them through subsequent script code.

B. The eq() Method

 It is the jQuery method used to select a specific element from multiple selected
elements.
 It uses index number values similar to an array; the first element from the selected
elements is given an index value of zero (0).

III. Removing Elements

A. The remove() Method

 It is the jQuery method used for removing elements from the DOM.
 It is used in conjunction with the eq() method to delete specific methods from selected
elements.
 Single elements can be deleted simply by typing either the element name (if only one
exists) or its ID or class value (if a value for any attribute is given).
 It can also remove ALL instances of an element if more than one (1) exists and ALL
instances are selected by the jQuery script.
B. The empty() Method
 It is the jQuery method used to remove any child elements of the selected elements,
assuming the selected element is a parent element.
 Parent elements that are also child elements will be retained; only the child elements
of the selected element will be removed.

12 Handout 1 *Property of STI

 student.feedback@sti.edu Page 1 of 2
 SH1804

References:
 SoloLearn. (n.d.). JavaScript tutorial. Retrieved on April 17, 2018, from
https://www.sololearn.com/Course/JavaScript/
 SoloLearn. (n.d.). jQuery tutorial. Retrieved on April 17, 2018, from
https://www.sololearn.com/Course/jQuery/

12 Handout 1 *Property of STI

 student.feedback@sti.edu Page 2 of 2