Jquery clearing appended content

Question

I have an auto-complete text field for cities. For example cities are suggested in a dropdown list while you type. Upon selecting a city I use hide() to hide the text field and append the selected city name to a #city div, replacing the text field.

I also have an edit button that makes the text field reappear. So when I click edit it should clear the previous appended city name and replace it with the new one I select.

It's sort of like this. But I completely remove the text field http://www.emposha.com/demo/fcbkcomplete_2/

$('#edit').click(function() {
              $(this).hide(); //hide edit button
              $("#city").append(""); //clear city name
              $("#city_text_field").show(); //show text field         
            });

When selecting a city again I use

$('#city').append('selected city');

this appends the new city by the previous one instead of replacing it. I also tried replaceWith() but nothing happens.

Can anyone please suggest a Jquery function that is suitable for this?

Answer 1

You could first use

$("#city").empty();

or directly replace the contents with

$("#city").html('selected city');