首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何从一个div中获取其他输入中的可见行,并删除css隐藏的所有其他行

从一个div中获取其他输入中的可见行,并删除CSS隐藏的所有其他行,可以通过以下步骤实现:

  1. 首先,使用JavaScript获取到包含所有行的div元素。可以使用document.getElementById()或document.querySelector()方法来获取该div元素。
  2. 接下来,使用JavaScript获取到该div元素中的所有行元素。可以使用divElement.getElementsByTagName()方法来获取所有行元素。
  3. 遍历所有行元素,判断每一行是否可见。可以使用CSS的getComputedStyle()方法来获取每一行元素的计算样式,然后通过判断display属性是否为"none"来确定行是否可见。
  4. 如果行是可见的,则将其保留;如果行是隐藏的,则将其从div中移除。可以使用行元素的parentNode属性来获取其父节点(即div元素),然后使用parentNode.removeChild()方法将隐藏行从div中删除。

以下是一个示例代码:

代码语言:txt
复制
// 获取包含所有行的div元素
var divElement = document.getElementById("yourDivId");

// 获取div元素中的所有行元素
var rowElements = divElement.getElementsByTagName("div");

// 遍历所有行元素
for (var i = 0; i < rowElements.length; i++) {
  var rowElement = rowElements[i];
  
  // 获取行元素的计算样式
  var computedStyle = window.getComputedStyle(rowElement);
  
  // 判断行是否可见
  if (computedStyle.display !== "none") {
    // 行是可见的,保留
    continue;
  } else {
    // 行是隐藏的,从div中移除
    rowElement.parentNode.removeChild(rowElement);
  }
}

这样,你就可以从一个div中获取其他输入中的可见行,并删除CSS隐藏的所有其他行了。

请注意,以上代码仅为示例,实际应用中可能需要根据具体情况进行适当的修改和调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Custom Beautify

同样是使用F12打开控制台,使用左上角的网页元素选择器,定位到希望隐藏的元素上,获取他的id或者class,然后在custom.css中使用隐藏属性,此处假设我要隐藏id为hidden_element的...可以隐藏所有的信息,包括div下的文本和图片,同时被隐藏的内容不占用空间。...除了hidden以外还有两个取值: visible 默认值,元素可见。 hidden 元素不可见。 collapse 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。...被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为hidden。 opacity: 0 opacity属性决定元素的透明度。...这意味着将opacity设为0只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用。

2.4K20

与Ajax同样重要的jQuery(1)

pre元素的后一个兄弟元素 $("label + input") prev ~ siblings 获取pre元素后边的所有兄弟元素 $("form ~ input") 练习2: ² 将class属性值为...⑤:可见性过滤选择器 根据元素的可见与不可见状态来选取元素 :hidden 选取所有不可见元素 $("tr:hidden") :visible 选取所有可见的元素 $("tr:visible") 练习5...: ² 为表单中所有隐藏域 添加 class属性,值为itcast ² 设置table所有 可见 tr 背景色 黄色 ² 设置table所有 隐藏tr 字体颜色为红色,显示出来 ,并输出tr中文本值 <...","yellow"); // 设置table所有 隐藏tr 字体颜色为红色,显示出来 ,并输出tr中文本值 $("tr:hidden").each(function(){ alert($(this)....:button 选取所有按钮元素 :file 选取所有文件上传域元素 :hidden 选取所有不可见元素 练习8: ² 对所有text框和password框,添加离焦事件,校验输入内容不能为空 ² 对

10K60
  • 纯代码实现WordPress文章设置隐藏内容公众号可见

    网上找了一圈找到了龙笑天下博主写的一篇文章:WordPress 文章部分内容关注微信公众号后可见 可以实现文章设置部分内容隐藏,引流用户到公众号关注并回复关键字。...来获取隐藏内容 正好下午看见一个比较看好的样式,就移植过来了 晓鹄博客 龙笑天下 emmmm,然后就一鼓作气(再而衰,三而竭。四又重新做气)移植了过来。完美套用。 捞一下午css捞的头晕......ok 最终效果 纯代码实现WordPress文章设置隐藏内容公众号可见 正文开始 此项目基于龙笑天下博客,教程大部分源自龙笑天下 1 核心代码 将以下代码放入 functions.php 中(钻芒修改版...隐藏内容,请输入密码后可见!...将以下代码放入 functions.php 中即可: 由于wordpress会自动转义文章里的代码造成冲突,请复制后删除下面代码中第6行的两个“把我删掉” // 后台文本编辑框中添加公众号隐藏简码按钮

    1.4K20

    全栈之前端 | 10.CSS3基础知识之表单表格学习

    属性 - 设置表格分隔边框的距离 visibility 属性 - 设置表格或其他元素是否可见或不可见 table-layout 属性 - 设置表格的单元格、行和列宽带的算法 caption-side...visibility 属性 - 设置表格或其他元素是否可见或不可见 描述: 此属性可以显示或隐藏元素而不更改文档的布局,此外该属性还可以隐藏 元素中的行或列。...*/ visibility: collapse; /* 对于表格元素隐藏表格的行或列以及折叠的弹性元素和 ruby 元素会被隐藏,并且不占用任何空间 ,而对于其他元素,collapse 被视为与 hidden...温馨提示: 在Github中有一个normalize.css小项目,它是一个现代的、支持HTML5的CSS重置替代方案,使浏览器渲染所有元素更加一致,并符合现代标准。...简单的说就是一个CSS框架,可以用来快速美化我们所需的表单及表格,有兴趣的朋友可以看看。 本文至此完毕,关注我获取更多有趣的知识,若有帮助请多多支持作者!

    22610

    使用HTML和CSS编写无JavaScript的Todo应用

    它匹配我们检查输入的所有以下兄弟姐妹 - 在这种情况下,我们要显示或隐藏的div。这也意味着CSS可以用于控制所有的item显隐状态。...div> 更大范围地实现显示或隐藏功能 现在我们有办法存储状态了,每个待办事项都有三个复选框来存储状态: 该item是否被创建 该item是否被标记已完成 该item是否被删除 可能会给你一个线索如何应用程序将工作...如果该复选框是:checked,我们要隐藏该项目的所有部分。 但是由于每个待办事项包含其他的item,那我们还需要确保保持下一个.todo是可见的。...在顶部输入完毕时,在底部添加todos 将最后一个未完成的item目移动到列表的顶部,其位置为:absolute,并显示“添加”按钮。 计算未完成item条数 CSS有一个可爱的功能,称为计数器。...之前有尝试过,但是CSS计数器不计算被隐藏的元素,所以当筛选出已完成的item时(因为所有未完成的项目都不可见),会看到未完成的item总数量值为0。

    3K20

    使用HTML和CSS编写无JavaScript的Todo应用

    以上代码也使用了CSS通用兄弟选择器:~。 它匹配我们检查输入的所有以下兄弟姐妹 - 在这种情况下,我们要显示或隐藏的div。这也意味着CSS可以用于控制所有的item显隐状态。...div> 更大范围地实现显示或隐藏功能 现在我们有办法存储状态了,每个待办事项都有三个复选框来存储状态: 该item是否被创建 该item是否被标记已完成 该item是否被删除 可能会给你一个线索如何应用程序将工作...如果该复选框是:checked,我们要隐藏该项目的所有部分。 但是由于每个待办事项包含其他的item,那我们还需要确保保持下一个.todo是可见的。...在顶部输入完毕时,在底部添加todos 将最后一个未完成的item目移动到列表的顶部,其位置为:absolute,并显示“添加”按钮。 计算未完成item条数 CSS有一个可爱的功能,称为计数器。...之前有尝试过,但是CSS计数器不计算被隐藏的元素,所以当筛选出已完成的item时(因为所有未完成的项目都不可见),会看到未完成的item总数量值为0。

    3.7K70

    jQuery 入门指南教程

    : $(this).hide() - 隐藏当前元素 $('p').hide() - 隐藏所有段落 $('p.test').hide() - 隐藏所有 class="test" 的段落 $('#test'...') // 选择表格的奇数行 $('#myForm :input') // 选择表单中的input元素 $('div:visible') // 选择可见的div元素 $('div:gt(2)') //...对于jQuery对象只能使用jQuery的方法,而dom对象只能使用dom的方法,如要获取第三个div>元素的内容。...最近的那个 form 父元素 $('div').children(); // 选择 div 的所有子元素 $('div').siblings(); // 选择 div 的同级元素 对 css 操作 $...$.each() 遍历一个数组或对象。 $.inArray() 返回一个值在数组中的索引位置。如果该值不在数组中,则返回-1。 $.grep() 返回数组中符合某种标准的元素。

    1.2K11

    BootStrap应用开发学习入门

    ,列表项中左对齐 ( 和 中) .list-inline: 将所有列表项放置同一行 .dl-horizontal: 该类设置了浮动和偏移,应用于 元素和 元素中,...您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。 定义列表:在这种类型的列表中,每个列表项可以包含 dt 和 dd 元素。 dt 代表 定义术语,就像字典。...*/ .container:before, .container:after { display: table; content: " "; } /*创建了一个伪元素,并确保了所有的容器包含所有的浮动元素...答:简单地说,网页设计中的网格用于组织内容,让网站易于浏览,并降低用户端的负载。..., .form-horizontal #水平表单 与其他表单不仅标记的数量上不同,而且表单的呈现形式也不同 .form-group #把标签和控件放在其中是获取最佳间距所必需的。

    17.6K20

    AngularDart4.0 指南- 表单 顶

    顺便说一句,您可以注入数据服务来获取和保存真实数据,或者将这些属性作为输入和输出(请参阅“模板语法”页面中的输入和输出属性)来绑定到父组件。 这不是现在的问题,这些未来的变化不会影响表单。...当你完成的时候,你留下一张纸条扔掉它。 关注绑定语法:[(ngModel)] =“...”。 现在运行应用程序并输入名称输入,添加和删除字符。 您会看到这些字符出现在诊断文本中并消失。...靠近表单顶部的诊断确认所有的更改都反映在model中。 从模板中删除诊断绑定,因为它已经达到了目的。 根据控制状态给出视觉反馈 使用CSS和类绑定,您可以更改表单控件的外观以反映其状态。...您可以通过根据名称控制的状态设置div>的隐藏属性来控制错误消息的可见性。...作为一种视觉效果,您可以隐藏数据输入区域并显示其他内容。 将表单封装在div>中,并将其hidden属性绑定到HeroFormComponent.submitted属性。

    17.5K30

    BootStrap应用开发学习入门

    ,列表项中左对齐 ( 和 中) .list-inline: 将所有列表项放置同一行 .dl-horizontal: 该类设置了浮动和偏移,应用于 元素和 元素中,...您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。 定义列表:在这种类型的列表中,每个列表项可以包含 dt 和 dd 元素。 dt 代表 定义术语,就像字典。...*/ .container:before, .container:after { display: table; content: " "; } /*创建了一个伪元素,并确保了所有的容器包含所有的浮动元素...答:简单地说,网页设计中的网格用于组织内容,让网站易于浏览,并降低用户端的负载。..., .form-horizontal #水平表单 与其他表单不仅标记的数量上不同,而且表单的呈现形式也不同 .form-group #把标签和控件放在其中是获取最佳间距所必需的。

    14.6K30

    前端基础篇之CSS世界

    这是因为我们对css只是大概知道个形,并没有看透css的本质。在同事的推荐下我阅读了张鑫旭老师的《css世界》,才发现css跟想象中的不太一样。...内联盒子:内联盒子就是指元素的外在盒子是内联的,会和其他内联盒子排成一行。 行框盒子:由内联元素组成的每一行都是一个行框盒子。行框盒子由一个个内联盒子组成,如果换行,那就是两个行框盒子。...幽灵空白节点:内联元素的每个行框盒子前面有一个“空白节点”一样,这个“空白节点”不占据任何宽度,无法选中获取,但是又实实在在存在,表现就如同文本节点一样。...div元素的高度仍然和上图一模一样,由字母x和行距共同撑起。此时如果删除字母x,div的高度不变,因为span元素的行框盒子前会产生幽灵空白节点,而幽灵空白节点+行高也能撑起div。 ?...样式1中,span元素的行框盒子前存在一个幽灵空白节点,而这个幽灵空白节点的行高是100px;样式2中,幽灵空白节点的行高是30px,但是这时span元素的行高是100px。

    2.1K50

    59道CSS面试题(附答案)

    注意:CSS3的新增属性有点类似于 relative与 fixed的结合体。如果目标区域在屏幕中可见,表现为 relative;如果目标区域在屏幕中不可见,表现为fixed。...例如div>都是块级元素,当显示这些元素中间的文本时,都将从新行中开始显示,其后的内容也将在新行中显示。 行内元素可以和其他行内元素位于同一行,在浏览器中显示时不会换行。...这些元素可以和其他行内元素位于同一行,同时可以设置其高度和宽度。 15、如何用DIV+CSS实现3栏布局(左右固定200pX,中间自适应)?...(1)优雅降级从复杂的现状开始,并试图减少用户体验的供给。 (2)渐进增强则从一个非常基础并且能够起作用的版本开始,并不断扩充,以适应未来环境的需要。...在同一个BFC中,两个毗邻的块级盒在垂直方向(和布局方向有关系)的 margin会发生折叠。 BFC决定元素如何对其内容进行布局,也决定与其他元素的关系和相互作用。 40、谈谈你对C规范的理解。

    5K50

    面试题必备-web页面基础

    html标签是由包围的关键词 html标签是成对出现的 有部分标签是没有结束标签的,叫单标签, 页面中所有的内容,都是要放在HTML标签中的 HTML标签分三部分: 标签名称 标签内容... action:浏览者输入的数据被传送到的地方,比如一个php页面 method:数据传送的方式 输入标签 input...rows:多行输入域的行数 其他语义化标签 div盒子 俗称盒子,division分割 在网页制作过程中,可以把一些独立的逻辑部分划分出来,放在一个div标签中,这个div标签的作用就是相当于一个容器...:visibillity visibility: hidden visible 元素可见 hidden 元素不可见 collapse:当在表格元素中使用时,此值可删除一行或一列,不会影响表格的布局。...溢出隐藏overflow 设置当对象的内容超过其指定高度以及宽度时如何显示内容 visible默认值,内容不会被修剪,会呈现在元素框之外 hidden 内容会被修剪,并且其余内容是不可见的 scroll

    2.5K10

    Web阶段:第五章:JQuery库

    div> div>div> div id="div03">div> 可见性过滤选择器 :hidden 所有隐藏的元素 :visible 所有可见元素 案例...这返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。...,(单位是毫秒) 第二个参数是 动画执行完成时的回调函数 hide() 隐藏可见的元素 第一个参数是 动画执行的时候,(单位是毫秒) 第二个参数是 动画执行完成时的回调函数 toggle() 可见就隐藏...,隐藏状态就显示 第一个参数是 动画执行的时候,(单位是毫秒) 第二个参数是 动画执行完成时的回调函数 淡入淡出动画 fadeIn() 淡入 让隐藏可见 fadeOut() 淡出 让可见消失 fadeTo...我们重点关心的是怎么拿到这个javascript的事件对象。以及使用。 如何获取呢javascript事件对象呢?

    26.3K20
    领券