jQuery toggle() text in separate element

I am having some trouble getting a toggle function to work and need someone to help explain it to me.

My HTML (simplified):

<div id="filter_names"></div>

<div class="item">Option 1</div>
<div class="item">Option 2</div>
<div class="item">Option开发者_运维知识库 3</div>
<div class="item">Option 4</div>

My jQuery (simplified)

$(".item").click(function(){

  var tagname = $(this).html();
  $('#filter_names').append(' > '+tagname);

  $(".loading").show();

});

As you can see I am appending clicked items' value to the div at the top. This works fine, but i need it to be removed when i click it again.

I am pretty sure it needs a toggle() function but so far my attempts have been pretty fruitless.

Some guidance would be greatly appreciated.

EDIT: You can see what i want to achieve in this JSfiddle. It's working exactly how i want it to by appending a value to the end (like a breadcrumb link), but is not being removed when i click it again.

You need to look at the #filter_names contents and check if the clicked tag's value is already included, then remove it if it is, or add it otherwise:

  if (filternames.indexOf(tagname) === -1) {
    $('#filter_names').append(' > '+tagname);
  } else {
    $('#filter_names').text(filternames.replace(' > '+tagname, ''));
  }

Working fiddle: http://jsfiddle.net/passcod/Kz3vx/

Note that you might get weird results if one tag's value is contained in another's.

<script type="text/javascript">
$(function(){
    $(".item").click(function(){
        var $this=$(this);
        var tagname = ' > ' +$this.html();
        //if has item-check class remove tag from filter_names
        if($this.hasClass("item-click")){
            var h=$("#filter_names").text();
            $("#filter_names").text(h.replace(tagname, '' ));
        }
        else{
            $('#filter_names').append(tagname);
        }
        $(this).toggleClass("item-click").toggleClass("item");
    });
});
</script>

try this one...

 $(this).toggleClass("item-click item");

this will add these classes alternatively when you click on div. or if you just want to remove this class on second click then you should write this in your click handler.

if( $(this).hasClass("item-click")){

     $(this).removeClass("item-click");
}

EDITED -----
to remove appended html you can try this...

 if($(this).hasClass("item-click")){
            $("#filter_names").text("");
        }
        else{
            $('#filter_names').append(tagname);
        }

it's working HERE

hope this helps you!!

I like passcod's solution - here's an alternative that wraps the elements in divs and puts them in alphabetical order.

JSFiddle here. The sort function is from http://www.wrichards.com/blog/2009/02/jquery-sorting-elements/.

$(".item").click(function(){
    var tagname = $(this).html();
    var target = $('#filter_names').find('div:contains("> ' + tagname + '")');
    if (target.is('*')) {
        target.remove();
    }
    else $('#filter_names').append('<div class="appended"> > '+ tagname +'<div>');  
    function sortAlpha(a,b) {
        return a.innerHTML > b.innerHTML ? 1 : -1;
    }
    $('#filter_names div').sort(sortAlpha).appendTo('#filter_names');
});