Search code examples
jquerydomremove-method

In jQuery, remove() method does not really remove element

I have a "language switcher" on a Drupal 7 site.

<ul class="language-switcher-locale-url">
    <li class="en first">
        <a class="language-link" xml:lang="en" href="someURL">
            <img class="language-icon" width="26" height="19" title="English" alt="English" src="someURL">
        </a>
    </li>
    <li class="fr active">
        <a class="language-link active" xml:lang="fr" href="someURL">
            <img class="language-icon" width="26" height="19" title="Français" alt="Français" src="someURL">
        </a>
    </li>
    <li class="ru last">
        <a href="someURL" class="language-link" xml:lang="ru">
            <img class="language-icon" src="someURL" width="26" height="19" alt="Русский" title="Русский" />
        </a>
    </li>
</ul>

When some special conditions are true, I want to remove the russian flag.

<script>
jQuery(document).ready(function() {
    var ce;
    ce = jQuery("ul.language-switcher-locale-url > li.ru");
    ce.remove();
    ce = undefined;     
});
</script>

It seems to work, because the flag is removed, Firebug shows no errors in the console and w/ Inspect Element I find that the <li> has been removed. However if I go to Page Source it is still there.

Does this mean jQuery does not remove the element from the DOM? Why is it still in the Page Source? How can I be sure it is completely removed?

Solution

  • Page source shows you the html that was originally downloaded from the server however you have removed it from the DOM which you confirmed with inspect element.