diff --git a/app/assets/javascripts/issues/show/components/description.vue b/app/assets/javascripts/issues/show/components/description.vue
index 78e729b97da0ef905012b0ad883a7e6eb4102d10..8202dec5f02ecb5282f17d35842192a7b9f801cf 100644
--- a/app/assets/javascripts/issues/show/components/description.vue
+++ b/app/assets/javascripts/issues/show/components/description.vue
@@ -1,6 +1,5 @@
 <script>
 import { GlToast, GlTooltip, GlModalDirective } from '@gitlab/ui';
-import $ from 'jquery';
 import Sortable from 'sortablejs';
 import Vue from 'vue';
 import SafeHtml from '~/vue_shared/directives/safe_html';
@@ -301,20 +300,19 @@ export default {
 
     updateTaskStatusText() {
       const taskRegexMatches = this.taskStatus.match(/(\d+) of ((?!0)\d+)/);
-      const $issuableHeader = $('.issuable-meta');
-      const $tasks = $('#task_status', $issuableHeader);
-      const $tasksShort = $('#task_status_short', $issuableHeader);
+      const tasks = document.querySelector('.issuable-meta #task_status');
+      const tasksShort = document.querySelector('.issuable-meta #task_status_short');
+
+      if (!tasks || !tasksShort) return;
 
       if (taskRegexMatches) {
-        $tasks.text(this.taskStatus);
-        $tasksShort.text(
-          `${taskRegexMatches[1]}/${taskRegexMatches[2]} checklist item${
-            taskRegexMatches[2] > 1 ? 's' : ''
-          }`,
-        );
+        tasks.textContent = this.taskStatus;
+        tasksShort.textContent = `${taskRegexMatches[1]}/${taskRegexMatches[2]} checklist item${
+          taskRegexMatches[2] > 1 ? 's' : ''
+        }`;
       } else {
-        $tasks.text('');
-        $tasksShort.text('');
+        tasks.textContent = '';
+        tasksShort.textContent = '';
       }
     },
     renderTaskActions() {
diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index 826e7e5a3d064d938eb44b9a888062d5d6854444..c3e87c3678f45b7e6b6a9fe4ed3d1304c40c6014 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/app/assets/javascripts/notes/components/noteable_note.vue
@@ -1,12 +1,12 @@
 <script>
 import { GlSprintf, GlAvatarLink, GlAvatar } from '@gitlab/ui';
-import $ from 'jquery';
 import { escape, isEmpty } from 'lodash';
 import { mapGetters, mapActions } from 'vuex';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import { INLINE_DIFF_LINES_KEY } from '~/diffs/constants';
 import { createAlert } from '~/flash';
+import { isInViewport, scrollToElement } from '~/lib/utils/common_utils';
 import { HTTP_STATUS_GONE } from '~/lib/utils/http_status';
 import { ignoreWhilePending } from '~/lib/utils/ignore_while_pending';
 import { truncateSha } from '~/lib/utils/text_utility';
@@ -223,14 +223,14 @@ export default {
       if (noteId === this.note.id) {
         this.isEditing = true;
         this.setSelectedCommentPositionHover();
-        this.scrollToNoteIfNeeded($(this.$el));
+        this.scrollToNoteIfNeeded(this.$el);
       }
     });
   },
 
   mounted() {
     if (this.isTarget && this.shouldScrollToNote) {
-      this.scrollToNoteIfNeeded($(this.$el));
+      this.scrollToNoteIfNeeded(this.$el);
     }
   },
 
@@ -240,11 +240,15 @@ export default {
       'removeNote',
       'updateNote',
       'toggleResolveNote',
-      'scrollToNoteIfNeeded',
       'updateAssignees',
       'setSelectedCommentPositionHover',
       'updateDiscussionPosition',
     ]),
+    scrollToNoteIfNeeded(el) {
+      if (!isInViewport(el)) {
+        scrollToElement(el);
+      }
+    },
     editHandler() {
       this.isEditing = true;
       this.setSelectedCommentPositionHover();
diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js
index d290a8ccb846079966f05e11703706d7ff5aa41d..a527936063ad297f04e679f2c9656e1ba08820ee 100644
--- a/app/assets/javascripts/notes/stores/actions.js
+++ b/app/assets/javascripts/notes/stores/actions.js
@@ -11,7 +11,7 @@ import { confidentialWidget } from '~/sidebar/components/confidential/sidebar_co
 import updateIssueLockMutation from '~/sidebar/queries/update_issue_lock.mutation.graphql';
 import updateMergeRequestLockMutation from '~/sidebar/queries/update_merge_request_lock.mutation.graphql';
 import loadAwardsHandler from '~/awards_handler';
-import { isInViewport, scrollToElement, isInMRPage } from '~/lib/utils/common_utils';
+import { isInMRPage } from '~/lib/utils/common_utils';
 import Poll from '~/lib/utils/poll';
 import { create } from '~/lib/utils/recurrence';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
@@ -681,12 +681,6 @@ export const toggleAwardRequest = ({ dispatch }, data) => {
   });
 };
 
-export const scrollToNoteIfNeeded = (context, el) => {
-  if (!isInViewport(el[0])) {
-    scrollToElement(el);
-  }
-};
-
 export const fetchDiscussionDiffLines = ({ commit }, discussion) =>
   axios.get(discussion.truncated_diff_lines_path).then(({ data }) => {
     commit(types.SET_DISCUSSION_DIFF_LINES, {
diff --git a/app/assets/javascripts/vue_shared/components/notes/system_note.vue b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
index 1cbbdf0deb0ded19bfda445a65a94aa1df20ff3d..1254bb297c2fa42edd2d20a0079c4144aa2ea7ec 100644
--- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
@@ -17,7 +17,6 @@
  *   />
  */
 import { GlButton, GlSkeletonLoader, GlTooltipDirective, GlIcon } from '@gitlab/ui';
-import $ from 'jquery';
 import { mapGetters, mapActions, mapState } from 'vuex';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import descriptionVersionHistoryMixin from 'ee_else_ce/notes/mixins/description_version_history';
@@ -77,12 +76,18 @@ export default {
     toggleIcon() {
       return this.expanded ? 'chevron-up' : 'chevron-down';
     },
-    // following 2 methods taken from code in `collapseLongCommitList` of notes.js:
-    actionTextHtml() {
-      return $(this.note.note_html).unwrap().html();
+    noteElement() {
+      const node = document.createElement('template');
+      // eslint-disable-next-line no-unsanitized/method
+      node.insertAdjacentHTML('afterbegin', this.note.note_html);
+      return node;
+    },
+    unwrappedNoteHtml() {
+      return this.noteElement.children[0].innerHTML;
     },
     hasMoreCommits() {
-      return $(this.note.note_html).filter('ul').children().length > MAX_VISIBLE_COMMIT_LIST_COUNT;
+      const elements = this.noteElement.querySelectorAll('ul > *') || [];
+      return elements.length > MAX_VISIBLE_COMMIT_LIST_COUNT;
     },
     descriptionVersion() {
       return this.descriptionVersions[this.note.description_version_id];
@@ -130,7 +135,7 @@ export default {
           :note-id="note.id"
           :is-system-note="true"
         >
-          <span ref="gfm-content" v-safe-html="actionTextHtml"></span>
+          <span ref="gfm-content" v-safe-html="unwrappedNoteHtml"></span>
           <template
             v-if="canSeeDescriptionVersion || note.outdated_line_change_path"
             #extra-controls
diff --git a/app/assets/javascripts/work_items/components/notes/system_note.vue b/app/assets/javascripts/work_items/components/notes/system_note.vue
index 92a2fcaf1dfc6e834018e78df26173b5aabf1169..1eece0af31e66381ea9c3577610292c432637a5c 100644
--- a/app/assets/javascripts/work_items/components/notes/system_note.vue
+++ b/app/assets/javascripts/work_items/components/notes/system_note.vue
@@ -16,7 +16,6 @@
  *   />
  */
 import { GlButton, GlSkeletonLoader, GlTooltipDirective, GlIcon } from '@gitlab/ui';
-import $ from 'jquery';
 import { renderGFM } from '~/behaviors/markdown/render_gfm';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import descriptionVersionHistoryMixin from 'ee_else_ce/notes/mixins/description_version_history';
@@ -77,12 +76,18 @@ export default {
     toggleIcon() {
       return this.expanded ? 'chevron-up' : 'chevron-down';
     },
-    // following 2 methods taken from code in `collapseLongCommitList` of notes.js:
-    actionTextHtml() {
-      return $(this.note.bodyHtml).unwrap().html();
+    noteElement() {
+      const node = document.createElement('template');
+      // eslint-disable-next-line no-unsanitized/method
+      node.insertAdjacentHTML('afterbegin', this.note.note_html);
+      return node;
+    },
+    unwrappedNoteHtml() {
+      return this.noteElement.children[0].innerHTML;
     },
     hasMoreCommits() {
-      return $(this.note.bodyHtml).filter('ul').children().length > MAX_VISIBLE_COMMIT_LIST_COUNT;
+      const elements = this.noteElement.querySelectorAll('ul > *') || [];
+      return elements.length > MAX_VISIBLE_COMMIT_LIST_COUNT;
     },
     descriptionVersion() {
       return this.descriptionVersions[this.note.description_version_id];
@@ -132,7 +137,7 @@ export default {
           :note-id="note.id"
           :is-system-note="true"
         >
-          <span ref="gfm-content" v-safe-html="actionTextHtml"></span>
+          <span ref="gfm-content" v-safe-html="unwrappedNoteHtml"></span>
           <template
             v-if="canSeeDescriptionVersion || note.outdated_line_change_path"
             #extra-controls
diff --git a/spec/frontend/work_items/components/notes/system_note_spec.js b/spec/frontend/work_items/components/notes/system_note_spec.js
index 3e3b8bf65b2c9141b11b30c974746267fd0e9b10..457d432565f605bb138b258f434bffb583e9c948 100644
--- a/spec/frontend/work_items/components/notes/system_note_spec.js
+++ b/spec/frontend/work_items/components/notes/system_note_spec.js
@@ -43,6 +43,7 @@ describe('system note component', () => {
           path: '/root',
         },
         bodyHtml: '<p dir="auto">closed</p>',
+        note_html: '<p dir="auto">closed</p>',
         systemNoteIconName: 'status_closed',
         createdAt: '2017-08-02T10:51:58.559Z',
       },