一聚教程网:一个值得你收藏的教程网站

热门教程

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

时间:2022-06-25 17:25:19 编辑:袖梨 来源:一聚教程网

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


    class1
   

        class2
       

            class3
       

   

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


   

       
  • list 1-1

  •        
  • list 1-2

  •        
  • list 1-3

  •    

       

           
  • list 2-1

  •        
  • list 2-2

  •        
  • list 2-3

  •    

    设置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
        });
    })

    热门栏目