Не убирается класс у svg элемента

Смотрите, я хочу чтобы при изменении ширины экрана у меню убирался класс actived, точнее у svg элемента. Но он не срабатывает. Всё убирается кроме actived класс. Подскажите ошибку.

$(document).ready(function() {
  function checkWidth() {
    var windowWidth = $('body').innerWidth(),
      list = $(".menu-list");
    desc = $(".description");
    mbtn = $(".menu-toggle button svg");

    if (windowWidth > 991) {
      list.removeClass('show transf');
      desc.removeClass('desc-fix');
      mbtn.remove('actived');
    } else {}
  }

  checkWidth();

  $(window).resize(function() {
    checkWidth();
  });
});
.menu-toggle {
  display: none;
  position: relative;
  z-index: 1000;
}

.menu-toggle button {
  border: 0;
  background: none;
  margin: 0 auto;
  margin-top: 6px;
}

.ham {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  float: right;
  margin-top: -20px;
}

.hamRotate.actived {
  transform: rotate(45deg);
}

.hamRotate180.actived {
  transform: rotate(180deg);
}

.line {
  fill: none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke: #000;
  stroke-width: 5.5;
  stroke-linecap: round;
}

.ham1 .top {
  stroke-dasharray: 40 139;
}

.ham1 .bottom {
  stroke-dasharray: 40 180;
}

.ham1.actived .top {
  stroke-dashoffset: -98px;
}

.ham1.actived .bottom {
  stroke-dashoffset: -138px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-toggle text-right">
  <button id="menu-toggle">
    <svg class="ham hamRotate ham1" viewBox="0 0 100 100" width="60" onclick="this.classList.toggle('actived')">
    <path class="line top"
    d="m 30,33 h 40 c 0,0 9.044436,-0.654587 9.044436,-8.508902 0,-7.854315 -8.024349,-11.958003 -14.89975,-10.85914 -6.875401,1.098863 -13.637059,4.171617 -13.637059,16.368042 v 40" fill="#1a1a1a" />
    <path class="line middle"
    d="m 30,50 h 40" fill="#1a1a1a" />
    <path class="line bottom"
    d="m 30,67 h 40 c 12.796276,0 15.357889,-11.717785 15.357889,-26.851538 0,-15.133752 -4.786586,-27.274118 -16.667516,-27.274118 -11.88093,0 -18.499247,6.994427 -18.435284,17.125656 l 0.252538,40" fill="#1a1a1a" />
    </svg>
  </button>
</div>

$('.menu-toggle button svg').click(function (e) {
  e.preventDefault();
  $('.menu-list').toggleClass('show transf');
  $('.description').toggleClass('desc-fix');
  $('.menu-toggle button svg').toggleClass('actived');
});
  
$(document).ready(function() {
  function checkWidth() {
    var windowWidth = $('body').innerWidth(),
    list = $(".menu-list");
    desc = $(".description");
    mbtn = $(".menu-toggle button svg");

    if(windowWidth > 991){
    list.removeClass('show transf');
    desc.removeClass('desc-fix');
    mbtn.removeClass('actived');
    }
      else {
    }
}

checkWidth();

$(window).resize(function(){
    checkWidth();
  });
});
#header {
  padding-top: 30px;
}

.menu ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-left: 23px;
  margin-top: 4px;
}

.menu ul li {
  margin-right: 40px;
}

.menu ul li:last-child {
  margin-right: 0px;
}

.menu ul li a {
  font-size: 18px;
  color: #b4b4b4;
  font-family: "Europe", sans-serif;
}

.menu ul li a:hover {
  color: #1a1a1a;
}

.logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.logo p {
  font-size: 25px;
  text-transform: uppercase;
  font-family: "Colus", sans-serif;
  margin: 0 auto;
  display: block;
  cursor: pointer;
}

.logo p::after {
  content: '';
  display: block;
  background: #1a1a1a;
  height: 1px;
  margin-left: 4.5px;
  width: 18px;
  margin-top: -8px;
}

.search {
  margin-top: 2px;
  text-align: right;
}

.search input {
  width: 80%;
  background: #eeeeee;
  border: 1px solid #eeeeee;
  border-radius: 10px;
  font-size: 13px;
  padding: 1px 30px 1px 20px;
  position: relative;
}

.search input::-webkit-input-placeholder {
  color: #bcbcbc;
  font-style: italic;
}

.search input:-ms-input-placeholder {
  color: #bcbcbc;
  font-style: italic;
}

.search input::-ms-input-placeholder {
  color: #bcbcbc;
  font-style: italic;
}

.search input::placeholder {
  color: #bcbcbc;
  font-style: italic;
}

.search button {
  border: 0;
  background: transparent;
  font-size: 11px;
  color: #aaaaaa;
  position: absolute;
  top: 7px;
  right: 5.5%;
}

.description {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.description h1 {
  font-size: 25px;
  text-transform: uppercase;
  width: 80%;
  margin: 0 auto;
  line-height: 1.25em;
}

.menu-toggle {
  display: block;
  position: relative;
  z-index: 1000;
}

.menu-toggle button {
  border: 0;
  background: none;
  margin: 0 auto;
  margin-top: 6px;
}

.ham {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: -webkit-transform 400ms;
  transition: -webkit-transform 400ms;
  transition: transform 400ms;
  transition: transform 400ms, -webkit-transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  float: right;
  margin-top: -20px;
}

.hamRotate.actived {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.hamRotate180.actived {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.line {
  fill: none;
  -webkit-transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke: #000;
  stroke-width: 5.5;
  stroke-linecap: round;
}

.ham1 .top {
  stroke-dasharray: 40 139;
}

.ham1 .bottom {
  stroke-dasharray: 40 180;
}

.ham1.actived .top {
  stroke-dashoffset: -98px;
}

.ham1.actived .bottom {
  stroke-dashoffset: -138px;
}

.menu-list {
  background: #1a1a1a;
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.menu-list ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-top: 30px;
  padding-bottom: 20px;
}

.menu-list ul li {
  margin: 0 auto;
  margin-bottom: 15px;
}

.menu-list ul li:last-child {
  margin-bottom: 0;
}

.menu-list ul li a {
  color: #fff;
  font-size: 16.5px;
  text-transform: uppercase;
}
<header id="header">
		<div class="nav">
			<div class="container">
				<div class="row">
					<div class="col-xl-4 col-lg-4 d-md-none d-xl-block d-lg-block d-sm-none d-none">
						<nav class="menu">
							<ul>
								<li>
									<a href="index.html">
										test
									</a>
								</li>
								<li>
									<a href="page-proofs.html">
										test
									</a>
								</li>
								<li>
									<a href="contacts.html#contacts">
										test
									</a>
								</li>
							</ul>
						</nav>
					</div>
					<div class="col-xl-4 col-lg-4 col-md-3 col-sm-3 col-4">
						<div class="logo">
							<p>
								<a href="#">
									test
								</a>
							</p>
						</div>
					</div>
					<div class="col-xl-4 col-lg-4 col-md-7 col-sm-7 col-5">
						<div class="search">
							<input type="text" name="search" placeholder="Поиск" required>
							<button type="submit">
								<i class="fas fa-search"></i>
							</button>
						</div>
					</div>
					<div class="d-lg-none d-xl-none col-md-2 col-sm-2 d-md-block col-3">
						<div class="menu-toggle text-right">
							<button id="menu-toggle">
								<svg class="ham hamRotate ham1" viewBox="0 0 100 100" width="60" onclick="this.classList.toggle('actived')">
								<path class="line top"
								d="m 30,33 h 40 c 0,0 9.044436,-0.654587 9.044436,-8.508902 0,-7.854315 -8.024349,-11.958003 -14.89975,-10.85914 -6.875401,1.098863 -13.637059,4.171617 -13.637059,16.368042 v 40" fill="#1a1a1a" />
								<path class="line middle"
								d="m 30,50 h 40" fill="#1a1a1a" />
								<path class="line bottom"
								d="m 30,67 h 40 c 12.796276,0 15.357889,-11.717785 15.357889,-26.851538 0,-15.133752 -4.786586,-27.274118 -16.667516,-27.274118 -11.88093,0 -18.499247,6.994427 -18.435284,17.125656 l 0.252538,40" fill="#1a1a1a" />
								</svg>
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</header>
	<div class="menu-list">
		<ul>
			<li>
				<a href="index.html">
					test
				</a>
			</li>
			<li>
				<a href="page-proofs.html">
					test
				</a>
			</li>
			<li>
				<a href="contacts.html#contacts">
					test
				</a>
			</li>
		</ul>
	</div>

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>


Ответы (1 шт):

Автор решения: Grundy

Проблема в строке mbtn.remove('actived');.

В данном случае идет попытка удалить элемент <actived> из набора, в котором только svg элемент.

Если заменить этот код, на тот, который используется для остальных классов

mbtn.removeClass('actived');

Все начинает работать так, как и ожидалось.

В сниппете по кнопке развернуть можно увидеть, что условие отрабатывает, класс убирается, и крестик меняется на гамбургер

$(document).ready(function() {
  function checkWidth() {
    var windowWidth = $('body').innerWidth(),
      list = $(".menu-list");
    desc = $(".description");
    mbtn = $(".menu-toggle button svg");

    console.log('resize', windowWidth);
    if (windowWidth > 991) {
      list.removeClass('show transf');
      desc.removeClass('desc-fix');
      mbtn.removeClass('actived');
    } else {}
  }

  checkWidth();

  $(window).resize(function() {
    checkWidth();
  });
});
.menu-toggle {
  position: relative;
  z-index: 1000;
}

.menu-toggle button {
  border: 0;
  background: none;
  margin: 0 auto;
  margin-top: 6px;
}

.ham {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  float: right;
  margin-top: -20px;
}

.hamRotate.actived {
  transform: rotate(45deg);
}

.hamRotate180.actived {
  transform: rotate(180deg);
}

.line {
  fill: none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke: #000;
  stroke-width: 5.5;
  stroke-linecap: round;
}

.ham1 .top {
  stroke-dasharray: 40 139;
}

.ham1 .bottom {
  stroke-dasharray: 40 180;
}

.ham1.actived .top {
  stroke-dashoffset: -98px;
}

.ham1.actived .bottom {
  stroke-dashoffset: -138px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-toggle text-right">
  <button id="menu-toggle">
    <svg class="ham hamRotate ham1" viewBox="0 0 100 100" width="60" onclick="this.classList.toggle('actived')">
    <path class="line top"
    d="m 30,33 h 40 c 0,0 9.044436,-0.654587 9.044436,-8.508902 0,-7.854315 -8.024349,-11.958003 -14.89975,-10.85914 -6.875401,1.098863 -13.637059,4.171617 -13.637059,16.368042 v 40" fill="#1a1a1a" />
    <path class="line middle"
    d="m 30,50 h 40" fill="#1a1a1a" />
    <path class="line bottom"
    d="m 30,67 h 40 c 12.796276,0 15.357889,-11.717785 15.357889,-26.851538 0,-15.133752 -4.786586,-27.274118 -16.667516,-27.274118 -11.88093,0 -18.499247,6.994427 -18.435284,17.125656 l 0.252538,40" fill="#1a1a1a" />
    </svg>
  </button>
</div>

→ Ссылка