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
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>
To fix your code:
id
on a page, so remove id="elements"
from your div
elements class="test test_1"
or class="test test_2"
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 #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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.