Call render on the roster if an item is removed, to clear headings.

converse.js

@@ -1629,8 +1629,8 @@
             this.model.on("remove", function (item) {
                 // remove element from the rosterView instance
                 this.rosteritemviews[item.id].$el.remove();
-
                 delete this.rosteritemviews[item.id];
+                this.render();
             }, this);
 
             this.$el.hide()
@@ -1642,14 +1642,11 @@
                             '<dt id="pending-xmpp-contacts">Pending contacts</dt>'),
 
         render: function (item) {
-            if (!item) {
-                return this;
-            }
             var $my_contacts = this.$el.find('#xmpp-contacts'),
                 $contact_requests = this.$el.find('#xmpp-contact-requests'),
                 $pending_contacts = this.$el.find('#pending-xmpp-contacts'),
                 $count, presence_change;
-            // TODO see if user_id would be useful
+            if (item) {
                 var user_id = Strophe.getNodeFromJid(item.id),
                         view = this.rosteritemviews[item.id],
                         ask = item.get('ask'),
@@ -1694,6 +1691,7 @@
                     $my_contacts.after($my_contacts.siblings('dd.current-xmpp-contact.unavailable').tsort('a', crit));
                     this.$el.show();
                 }
+            }
             // Hide the headings if there are no contacts under them
             _.each([$my_contacts, $contact_requests, $pending_contacts], function (h) {
                 if (h.nextUntil('dt').length) {