How do you get multiple elements to disappear when you click on it?
Question
Hi I am doing a Vanilla JS practice and I'd like to remove a div whenever I click on a span saying"continue". However, I got stuck at the JS coding.
EACH DIV HAS THE CLASSES one, two and three respectively.
here's my code
HTML:
<body>
<div class="container">
<div class="one">
<p class="card" id="test"><span class="texta">Hello<br><span class="next">Continue</span><span></p>
</div>
<div class="two">
<p class="card" id="test"><span class="texta">Hello<br><span class="next">Continue</span><span></p>
</div>
<div class="three">
<p class="card"><span class="texta">Hello<br><span class="next" onClick="move()">Continue</span><span></p>
</div>
</div>
</body>
JS:
function move(){
document.getElementsByClassName("three")[0].style="opacity:0";
}
I'm trying to do the effect using as much JS as possible, and as little html as possible. Apart from coding each and every div by getElementsByClassName(""), is there a more efficient way to go about it? Also, I thought I saw event.target syntax somewhere online before and I wonder if it could be applied in this context?
Thanks for any help rendered:! :)
2 answers
solution1
3 ACCPTED 2020-04-27 08:56:16
Here's a more dynamic solution. Also in your HTML-Code are some mistakes (missing '/' in an ending span; identical id's).
function move(el) { el.closest('div').style = 'display: none;' }
<body> <div class="container"> <div class="one"> <p class="card"> <span class="texta">Hello<br> <span class="next" onClick="move(this)">Continue</span> </span> </p> </div> <div class="two"> <p class="card"> <span class="texta">Hello<br> <span class="next" onClick="move(this)">Continue</span> </span> </p> </div> <div class="three"> <p class="card"> <span class="texta">Hello<br> <span class="next" onClick="move(this)">Continue</span> </span> </p> </div> </div> </body>
solution2
1 2020-04-27 08:36:05
function move(className){ document.getElementsByClassName(className)[0].style="display:none"; }
<body> <div class="container"> <div class="one"> <p class="card" id="test"><span class="texta">Hello1<br><span class="next" onClick="move('one')">Continue</span><span></p> </div> <div class="two"> <p class="card" id="test"><span class="texta">Hello2<br><span class="next" onClick="move('two')">Continue</span><span></p> </div> <div class="three"> <p class="card"><span class="texta">Hello3<br><span class="next" onClick="move('three')">Continue</span><span></p> </div> </div> </body>
Can you please check you want this type of thing or not?
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.