Hide message saying a comment has been removed

Ideas
1

If a comment has been removed, I think it’d be best to not render this:

Screen Shot 2022-09-10 at 2.27.33 pm

Other platforms do this, such as YouTube. Otherwise it can pollute the comments section.

This is especially true when testing. I’ve made a bunch of comments during testing, but I’d like this message of them having being deleted to not render.

Or at least provide an option to hide a comment whilst deleting it, so the user can choose what they’d like to do. e.g if that comment has replies, the user may choose to still keep those replies by not hiding the comment.

2

If you can figure out the HTML class or id of the above element using the Developer Tools (right click > inspect) then you can inject JavaScript code in Settings > Code Injection > Site Footer to hide the above message.

Here’s some sample JavaScript code I use to hide certain elements on my website.

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", ready);

    function ready() {
        document.querySelector(".gh-article-label").remove();
    }
</script>

Hope it helps. Let me know if you have any questions.

Regards,
Akshay

2 Likes
3

I can’t figure this one out. Surely there has to be a way to remove these, right?

1 Like
4

I added the following block in site footer code injection (obviously, replace it with the url of your blog).
It’s removing the comment has been removed for all posts, but only if the user isn’t admin

<script type="text/javascript">
  setTimeout(async () => {
    const isAdminResults = await fetch(
      "https://<blog_url>/ghost/api/admin/users/me/",
      {
        credentials: "include",
        referrer: "https://<blog_url>/ghost/auth-frame/",
        method: "GET",
        mode: "cors",
      }
    )
      .then((response) => response.json())
      .catch((error) => error);
    if (!isAdminResults.users) {
      const commentsFrame = document.querySelector(
        "#ghost-comments-root iframe"
      );
      const frameDoc = commentsFrame.contentWindow.document;
      const allComments = frameDoc.querySelectorAll(
        "div[data-test='comment-elements'] div.opacity-100"
      );
      for (const comment of allComments) {
        if (comment.getElementsByClassName("gh-comment-content").length == 0) {
          comment.remove();
        }
      }
    }
  }, 1000);
</script>
5

Thank you! Works perfectly.

6

This worked perfectly for me as well. Thank you for your time and knowledge. I could never have figured this out. I had written to Ghost support asking that we have the option to not have this show, but they have a lot on their plate, I’m sure. Thank you again.