PhasedEvolution PhasedEvolution - 2 months ago 21
Jade Question

Remove specific divs when specific input is activated

I have set up two inputs buttons (I am using jade ftm...):

input(type="image" name="tick" src="tick.png" onclick="exampleFunction(); return false;" width="50" height="50")
input(type="image" name="cross" src="cross.png" onclick="exampleFunction(); return false;" width="50" height="50")


Those two input buttons are the children of a div. Each of these divs are rendered when I receive information from the client side and all of them have the same class. So basically I have got two input buttons on each generated div and they are all equal but associated to different divs. Just to clarify:

#content_div
- each x in locals.xxx //jade syntax//
.example_class
input(type="image" name="tick" src="tick.png" onclick="exampleFunction(); return false;" width="50" height="50")
input(type="image" name="cross" src="cross.png" onclick="exampleFunction(); return false;" width="50" height="50")


What I want is to be able to add or remove the parent div of the specific inputs when the input is tick or cross respectively. Only the specific parent div of where those specific inputs are. I have tried quite a lot but couldn't get it done. I gladly accept jquery if needed. Thanks

Answer

Since you have tagged jquery in the question, I'll share with you a simple snippet using jQuery, hope it get you going.

http://codepen.io/anon/pen/ALWRRP

For jquery click event listener, you can have access to the event object, and event.target is the element that triggered the event. To locate the parent element with example_class in the class, you can use $(element).parent('.example_class').

Hope it helps :)

Comments