Question

This HTML:

<div class="editable" contentEditable="true">
    <span class="empty">change me</span>
</div>

and this JQuery:

$(".empty").click(function() {
            $(this).css("color","#000");
            $(this).html(" ");
        });

aren’t working as I hoped (or at all). I want to make it so when a user clicks on the “change me” text in the span that the font color changes to black and the existing text in the span goes away.

Answer 1

It’s not work because there is no height property for the span, and after emptying it’s contents it will have a width of 0px and a height of 0px. Replace the span with a <div> and give it a height in your css.
example here: http://jsfiddle.net/JftGd/12/