diff --git a/app/assets/javascripts/new_branch_form.js b/app/assets/javascripts/new_branch_form.js
index d93db7399e65910957007ab8986217f7b841fecb..ef36e58374c8d2c93e724a684911cff74b786698 100644
--- a/app/assets/javascripts/new_branch_form.js
+++ b/app/assets/javascripts/new_branch_form.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, consistent-return, no-return-assign, @gitlab/require-i18n-strings */
+/* eslint-disable func-names, no-return-assign, @gitlab/require-i18n-strings */
 
 import $ from 'jquery';
 import RefSelectDropdown from './ref_select_dropdown';
@@ -6,9 +6,9 @@ import RefSelectDropdown from './ref_select_dropdown';
 export default class NewBranchForm {
   constructor(form, availableRefs) {
     this.validate = this.validate.bind(this);
-    this.branchNameError = form.find('.js-branch-name-error');
-    this.name = form.find('.js-branch-name');
-    this.ref = form.find('#ref');
+    this.branchNameError = form.querySelector('.js-branch-name-error');
+    this.name = form.querySelector('.js-branch-name');
+    this.ref = form.querySelector('#ref');
     new RefSelectDropdown($('.js-branch-select'), availableRefs); // eslint-disable-line no-new
     this.setupRestrictions();
     this.addBinding();
@@ -16,12 +16,13 @@ export default class NewBranchForm {
   }
 
   addBinding() {
-    return this.name.on('blur', this.validate);
+    this.name.addEventListener('blur', this.validate);
   }
 
   init() {
-    if (this.name.length && this.name.val().length > 0) {
-      return this.name.trigger('blur');
+    if (this.name != null && this.name.value.length > 0) {
+      const event = new CustomEvent('blur');
+      this.name.dispatchEvent(event);
     }
   }
 
@@ -52,7 +53,7 @@ export default class NewBranchForm {
   validate() {
     const { indexOf } = [];
 
-    this.branchNameError.empty();
+    this.branchNameError.innerHTML = '';
     const unique = function (values, value) {
       if (indexOf.call(values, value) === -1) {
         values.push(value);
@@ -73,7 +74,7 @@ export default class NewBranchForm {
       return `${restriction.prefix} ${formatted.join(restriction.conjunction)}`;
     };
     const validator = (errors, restriction) => {
-      const matched = this.name.val().match(restriction.pattern);
+      const matched = this.name.value.match(restriction.pattern);
       if (matched) {
         return errors.concat(formatter(matched.reduce(unique, []), restriction));
       }
@@ -81,8 +82,7 @@ export default class NewBranchForm {
     };
     const errors = this.restrictions.reduce(validator, []);
     if (errors.length > 0) {
-      const errorMessage = $('<span/>').text(errors.join(', '));
-      return this.branchNameError.append(errorMessage);
+      this.branchNameError.textContent = errors.join(', ');
     }
   }
 }
diff --git a/app/assets/javascripts/pages/projects/branches/new/index.js b/app/assets/javascripts/pages/projects/branches/new/index.js
index 364223f18985c6a1fe7bd86c06e8ac0ed2a35b28..dbae89b5adecbd7821668583e34328fe018e1d71 100644
--- a/app/assets/javascripts/pages/projects/branches/new/index.js
+++ b/app/assets/javascripts/pages/projects/branches/new/index.js
@@ -1,8 +1,7 @@
-import $ from 'jquery';
 import NewBranchForm from '~/new_branch_form';
 
 // eslint-disable-next-line no-new
 new NewBranchForm(
-  $('.js-create-branch-form'),
+  document.querySelector('.js-create-branch-form'),
   JSON.parse(document.getElementById('availableRefs').innerHTML),
 );
diff --git a/spec/frontend/new_branch_spec.js b/spec/frontend/new_branch_spec.js
index e4f4b3fa5b56e132367794450317fb7b06a35d87..5a09598059d6955d5182e4cbf0f51aab48183c73 100644
--- a/spec/frontend/new_branch_spec.js
+++ b/spec/frontend/new_branch_spec.js
@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import NewBranchForm from '~/new_branch_form';
 
@@ -11,17 +10,19 @@ describe('Branch', () => {
 
   describe('create a new branch', () => {
     function fillNameWith(value) {
-      $('.js-branch-name').val(value).trigger('blur');
+      document.querySelector('.js-branch-name').value = value;
+      const event = new CustomEvent('blur');
+      document.querySelector('.js-branch-name').dispatchEvent(event);
     }
 
     function expectToHaveError(error) {
-      expect($('.js-branch-name-error span').text()).toEqual(error);
+      expect(document.querySelector('.js-branch-name-error').textContent).toEqual(error);
     }
 
     beforeEach(() => {
       loadHTMLFixture('branches/new_branch.html');
-      $('form').on('submit', (e) => e.preventDefault());
-      testContext.form = new NewBranchForm($('.js-create-branch-form'), []);
+      document.querySelector('form').addEventListener('submit', (e) => e.preventDefault());
+      testContext.form = new NewBranchForm(document.querySelector('.js-create-branch-form'), []);
     });
 
     afterEach(() => {
@@ -171,34 +172,34 @@ describe('Branch', () => {
     it('removes the error message when is a valid name', () => {
       fillNameWith('foo?bar');
 
-      expect($('.js-branch-name-error span').length).toEqual(1);
+      expect(document.querySelector('.js-branch-name-error').textContent).not.toEqual('');
       fillNameWith('foobar');
 
-      expect($('.js-branch-name-error span').length).toEqual(0);
+      expect(document.querySelector('.js-branch-name-error').textContent).toEqual('');
     });
 
     it('can have dashes anywhere', () => {
       fillNameWith('-foo-bar-zoo-');
 
-      expect($('.js-branch-name-error span').length).toEqual(0);
+      expect(document.querySelector('.js-branch-name-error').textContent).toEqual('');
     });
 
     it('can have underscores anywhere', () => {
       fillNameWith('_foo_bar_zoo_');
 
-      expect($('.js-branch-name-error span').length).toEqual(0);
+      expect(document.querySelector('.js-branch-name-error').textContent).toEqual('');
     });
 
     it('can have numbers anywhere', () => {
       fillNameWith('1foo2bar3zoo4');
 
-      expect($('.js-branch-name-error span').length).toEqual(0);
+      expect(document.querySelector('.js-branch-name-error').textContent).toEqual('');
     });
 
     it('can be only letters', () => {
       fillNameWith('foo');
 
-      expect($('.js-branch-name-error span').length).toEqual(0);
+      expect(document.querySelector('.js-branch-name-error').textContent).toEqual('');
     });
   });
 });