Putting a border around the selected list item
Are you required to have the .border-bottom class on the div elements?  I'd move those up to the li elements so you don't have to bother with the add/remove .border-bottom and you could use first-child to cleanly add a top border for the selected element if it's first (and avoid a double border for the other items).  See below snippet with the changes.



$("li").click(function() {
  //Remove the my-list--selected class from any elements that already have it
  $('.my-list--selected').removeClass('my-list--selected');
  //Add the my-list--selected class to the clicked element
  $(this).addClass('my-list--selected');
});
.border-bottom {
  border-bottom: 1px solid #ccc;
}

.my-list--selected {
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.my-list--selected:first-child {
  border-top: 1px solid #ccc;
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;ul&gt;
  &lt;li class="border-bottom"&gt;
    &lt;div&gt;Content&lt;/div&gt;
  &lt;/li&gt;
  &lt;li class="border-bottom"&gt;
    &lt;div&gt;Content&lt;/div&gt;
  &lt;/li&gt;
  &lt;li class="border-bottom"&gt;
    &lt;div&gt;Content&lt;/div&gt;
  &lt;/li&gt;
&lt;/ul&gt;