隐藏或删除内部具有相同类的 elon，不从任何子元素

Question

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

问题是元素不是在容器内部分离的，我认为这就是问题所在，但我需要这个结构，我把我的代码放进去了

简讯

<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 执行此操作

提前谢谢，问候

Answer 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>

Answer 2

要修复代码，请执行以下操作：

• 页面上具有相同id的元素不应超过 1 个，因此请从div元素中删除id="elements"
• 为了使用 jQuery 轻松选择元素，我建议使用通用类，然后遵循越来越具体的类，例如class="test test_1"或class="test test_2"
• 由于您使用的是 jQuery，因此不必在span元素上使用onclick属性来处理点击事件，您可以使用 jQuery 更轻松地选择它们，因此请从span元素中删除onclick="close_tabs(this)"
在 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>