JS and jquery Get the parent element, two different ways to delete child elements

JQuery JavaScript Framework

jquery is a browser-compatible JavaScript framework with the core idea of write Less,do more (less written and more). jquery was released in January 2006 by John Resig of America in BarCamp, New York, attracting a number of JavaScript gurus from around the world to join the team led by Dave Methvin.

This article is mainly to JS and jquery to get the parent element, delete the child elements of two different methods are introduced, the need for friends can come to the reference, I hope to help you
var Obj=document.getelementbyid ("id"); Gets the DOM object that uses the JS method when manipulating the object

var obj=$ ("#id"); you get a jquery object. Use the JQuery method when manipulating the object

1. Iterate over the object obtained above

(1). js method for (VAT i=0;j<obj.length;i++) {Obj[i] to obtain a corresponding element}

(2). JQuery method $ ("#id"). each (the function () {$ (this) to obtain a corresponding element});

2. Gets the parent element of the element that satisfies the condition

(1). js Method: Var O=obj[i].parentnode

(2). jquery method: Var o=$ (this). Parent ()

In jquery, parent () can get the parental element, so getting the parent of an element can use the

$ (selector). Parent (). parent ();

Example below

Creating HTML code and CSS styles

<div class= "Class1" >
Class1
<div class= "Class2" >
Class2
<div class= "CLASS3" >
Class3
</div>
</div>
</div>

div{padding:10px 20px;border:4px solid #ebcbbe;}
div.class1{width:200px;height:120px;}

Writing jquery Code

$ (function () {
$ ("DIV.CLASS3"). Click (function () {
obj = $ (this). Parent (). parent ();
Alert (Obj.prop (' class '));
});
})

2. After you get the parent element, you can delete the child elements of the parent element

(1). js method: O.removechild (Obj[i]);

(2). JQuery method: O.empty ()

In jquery, children () can select child elements, remove () to delete elements, so the following code can be used to delete child elements

$ (object). Children (selector). Remove (); Deletes the child element that satisfies the selector selector under the object element and deletes all child elements by default without filling out

Examples are as follows:

Creating HTML Elements

<div class= "Top" >
<div>
<li>list 1-1</li>
<li>list 1-2</li>
<li>list 1-3</li>
</div>
<div>
<li>list 2-1</li>
<li>list 2-2</li>
<li>list 2-3</li>
</div>
</div>

Set CSS Styles

div{padding:10px 20px;margin:10px;}
DIV.TOP{WIDTH:500PX;HEIGHT:200PX;BORDER:4PX solid #33cc33;}
Div.top div{min-height:60px;border:4px solid #ccc;}

Writing jquery Code

$ (function () {
$ ("div.top div"). Click (function () {
$ (this). Children (' Li '). Remove (); Delete a child element under a div li
});
})