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

Question

I need hide or remove, divs with same class, but one to one, actually i can delete all divs with same class in one time, and i don´t want this

The problem it´s the elements are separated not inside in container, and i think that´s the problem, but i need this sctructure, i put my code

JQUERY

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

CSS STYLE

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

I need that when click over span area, close that div and not all, but i need this works with the same html and i don´t know how do this from jquery

Thank´s in advanced, regards

Answer 1

Change the function to this: prev() get the previous sibling element, toggle() give elements the ability to hide and show sequentially

 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

To fix your code:

• you shouldn't have more, than 1 element with the same id on a page, so remove id="elements" from your div elements
• in order to easily select your elements with jQuery, I recommend to use a general class, then following more-and-more specific classes, eg class="test test_1" or class="test test_2"
• since you're using jQuery, you don't have to use the onclick attribute on your span elements to handle click events, you can select them more easily with jQuery, so remove the onclick="close_tabs(this)" from your span elements
• in your CSS, style your elements from more general to the most specific ones, eg instead of styling using #element , use the more general class .test on your elements to style them

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