JavaScriptでのクラスの削除方法がわからないです。

toggle()は切替をするのでadd()とremove()の二つを使う必要は無いですよ？

かなりコードが足らないような気がしますが…
通常時のnavにtransform: translateX(100%);がついていてこれで閉じてますよね？（画面外）

.nav.nav-close{
　　transform: translateX(100%);
}

.nav-closeを付与した後も同じtransform: translateX(100%);なので閉じたままになりますよね？
.nav-closeを外しても通常時に戻るだけなのでやはり閉じたままですよね？

ご提示されているコードだとたぶん誰も答えられないかと…

.nav-openを付与してtransform: translateX(0%);とすると、
classがついているときは開いている。※100%→0％（画面内）
クリックして切り替えると.nav-openが外れてtransform: translateX(100%);が効き画面外へ。
※0%→100％

こんな感じでしょうか。
足らないコードを補って試してみましたが動きました。
以下サンプルです。
参考になりますでしょうか。

<style media="screen">
  .nav{
  position: fixed;
  top: 0;
  right: 0;
  width: 35%;
  height: 100vh;
  padding: 73px 0;
  background-color:  #4d5269;
  z-index: 20;
  transform: translateX(100%);
  transition: .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 0 4px #333;
  }

  .nav.nav-close{
  transform: translateX(0%);
  }
</style>

<button type="button" name="button" onclick="eventRemove();">maru</button>
<ul class="nav">
<li class="nav-list"><a href="#menu1" class="close">Service</a></li>
<li class="nav-list"><a href="#menu2" class="close">Works</a></li>
<li class="nav-list"><a href="#menu3" class="close">Skills</a></li>
<li class="nav-list"><a href="#menu4" class="close">Profile</a></li>
<li class="nav-list"><a href="#menu5" class="close">Q&A</a></li>
<li class="nav-list"><a href="#menu6" class="close">Contact</a></li>
</ul>

<script type="text/javascript">
  function eventRemove (){
  document.getElementsByClassName('nav')[0].classList.toggle('nav-close');
  }

  if (matchMedia('only screen and (max-width:780px').matches){
  for (let i = 0; i < closeBtn.length; i++){
  closeBtn[i].addEventListener('click', eventRemove);
  }
  }
</script>