js与jquery获取父元素,删除子元素的两种不同方法

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。

本篇文章主要是对js与jquery获取父元素,删除子元素的两种不同方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
var obj=document.getElementById("id");得到的是dom对象，对该对象进行操作的时候使用js方法

var obj=$("#id");得到的是jquery对象，对该对象进行操作的时候使用jquery方法

1.对于上面获得的对象进行遍历

(1).js方法  for(vat i=0;j

(2).jquery方法  $(“#id”).each(function(){ $(this) 来获得对应的某一个元素});

2.获取满足条件的元素的父元素

(1).js方法：var o=obj[i].parentNode

(2).jquery方法：var o=$(this).parent()

jquery中parent()可以获取父级元素，所以获得某元素父级的父级可以使用

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

示例如下

创建Html代码及css样式

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

编写jquery代码

$(function(){
    $("div.class3").click(function() {
        obj = $(this).parent().parent();
        alert(obj.prop('class'));
    });
})

2.得到父元素后，可以删除该父元素的子元素

(1).js方法：o.removeChild(obj[i]);

(2).jquery方法：o.empty()

jquery中children()可以选择子元素，remove()可以删除元素，所以可用如下代码删除子元素

$(object).children(selector).remove();  // 删除object元素下满足selector选择器的子元素，不填写则默认删除所有子元素

示例如下：

创建Html元素

设置css样式

div{padding:10px 20px;margin:10px;}
div.top{border:4px solid #33cc33;}
div.top div{min-border:4px solid #ccc;}

编写jquery代码

$(function(){
    $("div.top div").click(function() {
        $(this).children('li').remove();  // 删除div下的子元素li
    });
})