Question

So, I’m creating my own breadcrumbs menu with jQuery since I didn’t want to have to load another bloated plugin. I have this code:

    function go_back(sec) {
    $('.content').html('<p>Loading</p>').load('_library_q.php?','sec='+sec);
    $(this).nextAll().remove();
}

Which is called by on click of a link. It loads the content area and removes the following links. This is a sample of the format of each link:

<span> &gt; <a style="cursor:pointer" OnClick="go_back('4');">Foo</a></span>

The loading works, but the following links do not remove. I believe that is because it is looking for a following <a>, however it does not find one. I would need to reference the parent <span>. I have tried using
$(this).parent().nextAll().remove();
however that does not work either. Any help?

Answer 1

As a quick fix I would suggest:

  function go_back(sec, elem) {
    $('.content').html('<p>Loading</p>').load('_library_q.php?','sec='+sec);
    $(elem).parent().nextAll().remove();
  }

html:

<span> &gt; <a style="cursor:pointer" OnClick="go_back('4', this);">Foo</a></span>

But javascript in html is awful in the long run so you should get rid of it altogether and design the whole thing without relying on inline javascript in html.

demo: http://jsfiddle.net/gHh7D/