Get ancestor element via selector

src/converse-muc.js

@@ -2756,8 +2756,8 @@
                 toggleRoomInfo (ev) {
                     /* Show/hide extra information about a room in the listing.
                      */
-                    const parent_el = ev.target.parentElement.parentElement,
-                        div_el = parent_el.querySelector('div.room-info');
+                    const parent_el = u.ancestor(ev.target, '.room-item'),
+                          div_el = parent_el.querySelector('div.room-info');
                     if (div_el) {
                         u.slideIn(div_el).then(u.removeElement)
                     } else {

src/templates/bookmark.html

-<div>
+<div class="room-item">
 <div class="available-chatroom d-flex flex-row {[ if (o.hidden) { ]} hidden {[ } ]}" data-room-jid="{{{o.jid}}}">
     <a class="open-room w-100" data-room-jid="{{{o.jid}}}" title="{{{o.open_title}}}" href="#">{{{o.name}}}</a>
     <a class="remove-bookmark fa fa-bookmark align-self-center {[ if (o.bookmarked) { ]} button-on {[ } ]}"

src/templates/room_item.html

-<div>
+<div class="room-item">
   <div class="available-chatroom d-flex flex-row">
     <a class="open-room available-room"
        data-room-jid="{{{o.jid}}}"

src/templates/rooms_list_item.html

-<div>
+<div class="room-item">
 <div class="available-chatroom d-flex flex-row {[ if (o.num_unread_general) { ]} unread-msgs {[ } ]}" data-room-jid="{{{o.jid}}}">
 {[ if (o.num_unread) { ]}
     <span class="msgs-indicator">{{{ o.num_unread }}}</span>

src/utils.js

@@ -148,6 +148,14 @@
         return el;
     }
 
+    u.ancestor = function (el, selector) {
+        let parent = el;
+        while (!_.isNil(parent) && !sizzle.matchesSelector(parent, selector)) {
+            parent = parent.parentElement;
+        }
+        return parent;
+    }
+
     u.nextUntil = function (el, selector, include_self=false) {
         /* Return the element's siblings until one matches the selector. */
         const matches = [];