javascript - highlight and un-highlight item selected in jquery -

i have dynamic list of image thumbnails. every time image selected want unselect selected image , select newly clicked image. html looks below:

<ul class="imglist">     <li>         <div id="item1" class="imgstyle" order="{#}" imgid="{imgid}">             <img src="{imgpath}"/>         </div>     </li>     <li>         <div id="item2" class="imgstyle" order="{#}" imgid="{imgid}">             <img src="{imgpath}"/>         </div>     </li>     <li>         <div id="itemn" class="imgstyle" order="{#}" imgid="{imgid}">             <img src="{imgpath}"/>         </div>     </li> </ul> 

and use jquery bind items on click event this:

$( ".imgstyle img").bind( "click", function() {     $(item1).css("border", "5px solid grey"); } 

i'm able select/highlight item clicked. how unselect highlighted item (div)? thanks!

you should use css classes :

.selected { border: 5px solid gray;}  $('.imglist').on('click','img', function() {    $(this).parents('.imglist').find('.selected').removeclass('selected').end().end().addclass('selected'); });