从没有子元素中隐藏或删除内部具有相同类的元素答案

【问题标题】：Hide or remove elments with same class inside from no child elements从没有子元素中隐藏或删除内部具有相同类的元素
【发布时间】：2018-06-30 16:02:39
【问题描述】：

我需要隐藏或删除具有相同类的 div，但一对一，实际上我可以一次删除所有具有相同类的 div，我不想要这个

问题是元素没有在容器内分离，我认为这是问题所在，但我需要这种结构，我输入了我的代码

JQUERY

<script>
function close_tabs(idc)
{
$(idc).parent().hide();
}
</script>

CSS 样式

<style>
#elements
{
position:relative;
width:400px;
height:40px;
margin-left:auto;
margin-right:auto;
margin-bottom:7px;
background-color:green;
}
</style>

HTML：

<div id="elements" class="test_1"></div><span onclick="close_tabs(this)">Div 1</span>
<div id="elements" class="test_1"></div><span onclick="close_tabs(this)">Div 2</span>
<div id="elements" class="test_1"></div><span onclick="close_tabs(this)">Div 3</span>
<div id="elements" class="test_1"></div><span onclick="close_tabs(this)">Div 4</span>

我需要在单击跨区域时关闭该 div 而不是全部，但我需要它与相同的 html 一起工作，我不知道如何从 jquery 执行此操作

非常感谢，问候

【问题讨论】：

如果用户单击文本“Div 2”，应该隐藏/删除哪个<div>？ <div> 是否应该隐藏或删除？

标签： javascript jquery

【解决方案1】：

把函数改成这样：prev() 获取上一个兄弟元素，toggle() 赋予元素顺序隐藏和显示的能力

function close_tabs(idc) {
  $(idc).prev().remove();
  $(idc).remove();
}

#elements
{
position:relative;
width:400px;
height:40px;
margin-left:auto;
margin-right:auto;
margin-bottom:7px;
background-color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="elements" class="test_1"></div><span onclick="close_tabs(this)">Div 1</span>
<div id="elements" class="test_1"></div><span onclick="close_tabs(this)">Div 2</span>
<div id="elements" class="test_1"></div><span onclick="close_tabs(this)">Div 3</span>
<div id="elements" class="test_1"></div><span onclick="close_tabs(this)">Div 4</span>

【讨论】：

我也需要删除Div 1，当点击跨度时也需要删除跨度，非常感谢
已更改。这让你满意吗？

【解决方案2】：

修复您的代码：

你不应该在一个页面上拥有超过 1 个具有相同 id 的元素，因此请从你的 div 元素中删除 id="elements"
为了使用 jQuery 轻松选择元素，我建议使用通用类，然后遵循越来越具体的类，例如class="test test_1" 或 class="test test_2"
由于您使用的是 jQuery，因此您不必使用 span 元素上的 onclick 属性来处理点击事件，您可以使用 jQuery 更轻松地选择它们，因此请从您的span元素
在您的 CSS 中，为您的元素设置样式，从更一般的到最具体的，例如不要使用 #element 进行样式设置，而是在您的元素上使用更通用的类 .test 来设置样式

// select your elements via the '.test' class
// and handle their click events
$('.test').on('click', function () {
  // store the element wrapped with jQuery
  var element = $(this);  
  
  // hide the element
  element.hide();  
  
  // hide the element next to it
  element.next().hide();
});

.test {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 7px;  
  width: 400px;
  height: 40px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test test_1"></div><span>Div 1</span>
<div class="test test_2"></div><span>Div 2</span>
<div class="test test_3"></div><span>Div 3</span>
<div class="test test_4"></div><span>Div 4</span>

【讨论】：