# Hide certain children of li and show others by click

**URL:** <https://forum.kirupa.com/t/hide-certain-children-of-li-and-show-others-by-click/332662>\
**Category:** web dev\
**Created:** [September 15, 2014, 6:41pm UTC](https://forum.kirupa.com/t/hide-certain-children-of-li-and-show-others-by-click/332662 "2014-09-15T18:41:22Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Zetse](https://avatars.discourse-cdn.com/v4/letter/z/76d3ee/32.png) [@Zetse](https://forum.kirupa.com/u/Zetse)\
**Post date:** [September 15, 2014, 6:41pm UTC](https://forum.kirupa.com/t/hide-certain-children-of-li-and-show-others-by-click/332662/1 "2014-09-15T18:41:22Z")

</div>

[SIZE=2][FONT=arial narrow]Hi guys,  
I am a newbie, and I need your help on the following:  
This is the HTML I have so far, a \<ul\> with a couple of \<li\>s.  
In every \<li\> we have:  
a \<span\> , with display: block:  
an \<a\> , with display: block;  
and an \<input\> with display: none; in css.  
[/FONT][SIZE=2][FONT=arial narrow]  
\<ul id=“menu”\>  
\<li class=“menuitem”\> \<span\> Name \</span\> \<a href="#" \> Edit here \</a\> \<form\> \<input type=“text” class=“edit-field” name=“flname”/\> \</form\>\</li\>  
\<li class=“menuitem”\> \<span\> Location \</span\> \<a href="#" \> Edit here \</a\> \<form\> \<input type=“text” class=“edit-field” name=“location”/\> \</form\>\</li\>  
\<li class=“menuitem”\> \<span\> Occupation\</span\> \<a href="#" \> Edit here \</a\> \<form\> \<input type=“text” class=“edit-field” name=“occupation”/\> \</form\>\</li\>  
\<li class=“menuitem”\> \<span\> Birthday\</span\> \<a href="#" \> Edit here \</a\> \<form\> \<input type=“text” class=“edit-field” name=“DOB”/\> \</form\>\</li\>  
\</ul\>

A click event listener is added to the \<ul \>, the click is delegated to the \<a\> tag.

This is what I need to do with Javascript only:  
If the click was on an anchor tag, find its parentNode (it should be the \<li\>).  
In the parentNode find the span, the input and the a by the Tagname. Hide the span and the anchor, and show the input field.  
My question is basically how would I loop through all the \<li\>, so that clicking on the \<a\> of the current \<li\> would hide the \<span\> and the \<a\>, and would show the \<input\> field of that current \<li\> ?  
I might need to add more classes, or IDs, I am not sure…

Thank you for your help. [/FONT][/SIZE]  
[/SIZE]