Question

我需要隐藏或删除具有相同类的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做到这一点

非常感谢

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

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

在同一页面上，您不应有超过1个元素，且具有相同的id，因此请从您的id="elements"元素中删除div
为了使用jQuery轻松选择元素，我建议使用通用类，然后使用越来越多的特定类，例如class="test test_1"或class="test test_2"
由于您使用的是jQuery，因此无需使用onclick元素上的span属性来处理点击事件，因此您可以使用jQuery更轻松地选择它们，因此请删除{您的onclick="close_tabs(this)"元素中的{1}}
在CSS中，将元素的样式从更一般的元素定义到最具体的元素，例如与其使用span进行样式设置，不如在元素上使用更通用的类#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;
}

在没有子元素的情况下隐藏或删除具有相同类的元素

2 个答案: