首页
学习
活动
专区
工具
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.3K20

与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.3K20

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

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

    20310

    使用HTML和CSS编写无JavaScriptTodo应用

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

    2.9K20

    使用HTML和CSS编写无JavaScriptTodo应用

    以上代码也使用了CSS通用兄弟选择器:~。 它匹配我们检查输入所有以下兄弟姐妹 - 在这种情况下,我们要显示或隐藏div。这也意味着CSS可以用于控制所有的item显隐状态。... 更大范围地实现显示或隐藏功能 现在我们有办法存储状态了,每个待办事项都有三复选框来存储状态: 该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方法,如要获取第三元素内容。...最近那个 form 父元素 $('div').children(); // 选择 div 所有子元素 $('div').siblings(); // 选择 div 同级元素 对 css 操作 $...$.each() 遍历一数组或对象。 $.inArray() 返回一值在数组索引位置。如果该值不在数组,则返回-1。 $.grep() 返回数组符合某种标准元素。

    1.2K11

    AngularDart4.0 指南- 表单 顶

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

    17.5K20

    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。...例如都是块级元素,当显示这些元素中间文本时,都将从新开始显示,其后内容也将在新显示。 行内元素可以和其他行内元素位于同一,在浏览器显示时不会换行。...这些元素可以和其他行内元素位于同一,同时可以设置其高度和宽度。 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> 可见性过滤选择器 :hidden 所有隐藏元素 :visible 所有可见元素 案例...这返回父元素第一其position设为relative或者absolute元素。此方法仅对可见元素有效。...,(单位是毫秒) 第二参数是 动画执行完成时回调函数 hide() 隐藏可见元素 第一参数是 动画执行时候,(单位是毫秒) 第二参数是 动画执行完成时回调函数 toggle() 可见隐藏...,隐藏状态就显示 第一参数是 动画执行时候,(单位是毫秒) 第二参数是 动画执行完成时回调函数 淡入淡出动画 fadeIn() 淡入 让隐藏可见 fadeOut() 淡出 让可见消失 fadeTo...我们重点关心是怎么拿到这个javascript事件对象。以及使用。 如何获取呢javascript事件对象呢?

    26.3K20
    领券