学习删除元素的记录

之前有做过一些页面动效，现在有了这个属性的话，忽然有些想法：

当用户点击选择li之后，对应的如果是左右两栏的话左边是大标题，右边是大标题对应的内标题选择项，在选择的时候：

 

第一种方法；在选择的时候点击右侧的时候该li会添加一个class样式，在这里这个css样式暂时设置为“liac”然后如果右侧外围是用ul包围起来的话，那么右侧ul的数量和左侧li标题的数量是对应的，那么只需要一个判定，右侧是否现在有选择后的样式，这里暂时设置为："tiac" 如果有的话就不管了，如果没有的话则添加对应样式，（这里的难点在于 ：如何判定，如果用户在点击选择内选项后，继而又取消选择了呢？那么这里如何实时监测左边对应的右侧内选项是否有选中的呢？这点考虑下吧～暂时定为这个是可以解决的）。 然后在点击提交的时候删除所有左侧不包含“tiac”样式的li和右侧不包含“liac”的li（忽然想到了，如果添加一个自定义样式到右侧的每个容器ul中呢？当该ul内含有包含“liac样式的li”的时候，在最后点提交的时候就直接删除左侧不包含tiac的li和右侧自定义样式为关闭的ul，然后继续删除所有包含tiac的li 的ul下面不包含liac的li，那么整理出来的就是所有包含liac的li和它的容器，还有与有包含liac的li的ul对应index的左侧标题，这时只需要存储起来可以用多条数组存储起来，比如【"id","name".“age”】这种形式存储起来）

 

第二种方法：前面的走法差不多，右侧的选出来后，这里需要用到循环，在点击提交的时候遍历出包含有liac的li元素，及其需要的元素，然后获取父元素的index（），然后获取左侧对应的标题的index，即可。（其实走法差不多的，开始还有一种方法是忘记了。。。）

 

 

<! DOCTYPE html>

< html >

 

     < head >

           < meta charset = "utf-8" >

           < title ></ title >

           < script src = "js/jquery-1.11.1.min.js" type = "text/javascript" charset = "utf-8" ></ script >

     </ head >

 

     < body >

 

           < ul >

                < li class = "c" title = "1" >1 < span >23123</ span ></ li >

                < li class = "a c" title = "2" >2</ li >

                < li class = "a c" title = "3" >3</ li >

                < li title = "4" >4</ li >

                < li title = "5" >5</ li >

                < li title = "6" >6</ li >

                < input type = "button" name = "a" id = "a" value = "删除" />

           </ ul >

 

     </ body >

     < script type = "text/javascript" >

            $( "#a" ).click( function () {

                 //         $("ul li").remove("[title=1]");

                 //         console.log($("ul li").text());

                 $( "ul li:not(li.c)" ).remove();

           })

      </ script >

 

</ html >

转载于:https://www.cnblogs.com/jldiary/p/5124595.html