JQuery，如何清除，除了点击的元素以外，其他所有元素

Posted 2023-04-22

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery，如何清除，除了点击的元素以外，其他所有元素相关的知识，希望对你有一定的参考价值。

如上图，一个大的div class="main"包含了很多个div class="class1"(数量不确定)
比如我点击任意一个里面小的div,其他div都被清除掉，然后被点击的div就会移到最顶上

可以使用Jquery中的siblings()和remove()方法实现。实现原理主要是使用siblings获取被点击元素之外的同级元素，然后使用remove()删除。完整的代码如下：

运行的效果如下：

例如当点击DIV内容为2的框时，其他的DIV被清除，内容为2的框移到最顶，点击后的效果图如下：

扩展资料：

如果想对移到最顶的框进行一定的突出显示处理，比如给个背景颜色，字体加大，可以利用css()方法，代码如下：

<!doctype html>

<html>

<head>

<title>JQuery例子</title>

</head>

<body>

$(function()

$(".class1").click(function()

$(this).siblings().remove();

$(this).css("background-color":"yellow","font-size":"50px");

);

</script>

</div>

.mainwidth:640px;height:500px;margin:0 auto;border:1px solid red;

.class1width:90%;height:100px;margin:0 auto;border:1px solid red;margin-top:10px;font-size:40px;

</style>

</body>

</html>

运行的效果如下：

参考技术A

思路：获取被点击元素之外的元素，使用remove()方法删除节点。

下面进行实例演示——点击某个div后，删除同级的其余div元素：

1、HTML结构

</div>

2、jquery代码

$(function()

$(".test").click(function()

$(this).siblings().remove(); // 使用siblings获取被点击元素之外的同级元素，然后使用remove()删除

);

3、效果演示

参考技术B 亲，直接这样就可以了
var aDiv=$("class1");
aDiv.click(function()
$(this).siblings().hide();

);追问

请问我有写错吗？它不起效啊



追答

亲这里，第二个图那里选择class1那里前面少了一个点应该是.class1以为他是类别选择器

我那里也少写了一个点

本回答被提问者采纳参考技术C 这个问题通过jQuery处理的方法有很多，下面给出两种解决办法：

（1）通过查找兄弟节点删除
$('.class1').click(function()
$(this).siblings('.class1').remove();

)

（2）通过克隆节点，清空main内容
$('.class1').click(function()
var node = $(this).clone();

$('.main').empty().append(node)
)
其实，jQuery处理节点的方法有很多，可以尽情发挥，对于这题也有不下于5种解决方案，可以尽情发挥。

JQuery：如何在隐藏元素上触发点击事件？

【中文标题】JQuery：如何在隐藏元素上触发点击事件？【英文标题】：JQuery: How to fire click event on hidden element? 【发布时间】：2018-12-24 14:41:51 【问题描述】：

我想创建一个闪烁的效果。当用户点击闪烁的元素时，它会消失。但是，似乎并非每个“用户的点击”都能触发“点击事件”。有时，当我单击闪烁的元素时，它并没有消失。我认为原因是无法点击隐藏元素。就像这篇文章说的CSS: Is a hidden object clickable?。那么，有没有其他方法可以让用户点击元素时闪烁的元素立即消失呢？

var flashToggle = setInterval(function() 
  $("div").toggle();
, 200)

$("div").on("click", function(e) 
  clearInterval(flashToggle);
  $(this).hide();
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>Flashing element</div>

【问题讨论】：

【参考方案1】：

尝试使用 opacity : 0|1 而不是 display: none / visibility: hidden。关于 opacity: 0 的点击事件对我有用。它对我有用。

【讨论】：

【参考方案2】：

将闪烁的元素放在另一个元素中，并将处理程序放在该父元素上。此外，您可以更改 flashing 元素的 visibility 属性，而不是 flashing 元素的 display，这样它就不会在每次出现或消失时都更改页面的布局。

const child = $('#child');
let visible = true;
var flashToggle = setInterval(function() 
  visible = !visible;
  child.css('visibility',
    visible
    ? 'visible'
    : 'hidden'
  );
, 500)

$("#container").on("click", function(e) 
  clearInterval(flashToggle);
  $(this).hide();
)

div 
  background-color: yellow;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <div id="child">Flashing element</div>
</div>

【讨论】：

【参考方案3】：

我认为这可能是您正在寻找的：$("my-element").click()

【讨论】：

如果我理解得很好，他的问题是关于这对隐藏元素不起作用【参考方案4】：

是的，hidden/toggle 将通过设置 css display 来隐藏元素。隐藏时，元素无法接收点击。您可以尝试以下方法：

请改用.css('visibility','hidden|visible')。建议这样做，因为它不会产生改变容器大小和导致其他元素抖动的副作用。

将您的闪烁元素包装在一个容器元素中，而不是注册对容器元素的点击。

【讨论】：

非常感谢。虽然方法一不行（可见性：隐藏元素也不能触发点击事件），但方法二可以立即移除闪烁的元素！【参考方案5】：