How to get the text from a specific closest element?

I've been learning to code by my own and to do some fancy stuff with jquery library but I'm stuck here. This is what I got:

<span class='ccy'>San Diego</span><span class='dc'> X</span>
<span class='ccy'>San francisco</span><span class='dc'> X</span>
<span class='ccy'>Palo alto</span><span class='dc'> X</span>

I want to be able to click in the $("span.dc") and get only the text() of the < span> next to it (the name of the city), works fine if there is only one city in the html, but as long as I keep adding them up the result gets messy and I end up with a string containing all the city names and I only need one.

I know that the obvious thing would be give them a different id to each one but it'd get even messier 'cause the that html is dynamically generated depending on a previous event triggered by the user, the cities come from an array and I need the individual name of the city to delete from it if 'x' is clicked, I hope I've explained myself good enough.

jsfiddle here!! so you can see better what I mean