削除する必要のある正確なクラス名を知らずに特定のクラスを要素から削除するjQueryまたはJavaScript

JavaScriptを使用して、div要素を作成し、一連のクラスを含む配列から特定のクラスを割り当て、ランダムメソッドを使用してランダムな順序でHTML要素にクラスを割り当てます。次に、ボタンクリックイベントなどのイベントに基づいて、HTML要素が持つクラスのセットから特定のクラスを削除し、特定のクラスを追加します。

問題は、削除する必要のある正確なクラス名がわからないことですが、クラスがそのようなもので始まるように、私はそれについてほとんど知りません。そのため、特定のHTML要素を選択し、クリックイベントのボタンなどのイベントでそのHTML要素から特定のクラスを削除できるjQueryまたはJavaScriptコードが必要になります。

この問題を解決するためにJavaScriptでonclickボタン処理関数にいくつかのコードを書きました。

var position=["tile-position-1-1", "tile-position-2-1", "tile-position-3-1", "tile-position-4-1",
                "tile-position-1-2", "tile-position-2-2", "tile-position-3-2", "tile-position-4-2",
                "tile-position-1-3", "tile-position-2-3", "tile-position-3-3", "tile-position-4-3",
                "tile-position-1-4", "tile-position-2-4", "tile-position-3-4", "tile-position-4-4"];
 $("#start").on("click", function(){
   var ele='<div class="tile tile-2 '+position[Math.floor(Math.random()*16)]+' tile-new">'+
            '<div class="tile-inner">2</div></div>'+
            '<div class="tile tile-2 '+position[Math.floor(Math.random()*16)]+' tile-new">'+
            '<div class="tile-inner">2</div></div>';
     $('.tile-container').append(ele);
 });
$("#left").on("click", function(){
  var arr=[];
  arr=$(".tile-container").find('*').filter(function(){
    return $(this).attr("class").match(/tile-position\-*/);
  });
  for(i=0;i<4;i++)
      for(j=0;j<4;j++){
        arr.removeClass(`tile-position-${i+1}-${j+1}`)
    }
    arr.addClass('tile-position-1-4');
   $('.tile-container')
   var ele1='<div class="tile tile-2 '+position[Math.floor(Math.random()*16)]+' tile-new"><div class="tile-inner">2</div>';
      $(".tile-container").append(ele1);
});

html, body {
  margin: 0;
  padding: 0; }
.btn-container{
  margin-top: 30px;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
}
button{
  color: #0099CC;
  background: #0099CC;
  border: 2px solid black;
  border-radius: 6px;
  color: black;
  padding: 10px 20px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
}
.container{
  width: 500px ;
  margin: 0 auto;
}
.game-container {
  margin-top: 40px;
  position: relative;
  padding: 15px;
  background: #345;
  border-radius: 2px;
  width: 500px;
  height: 500px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
.grid-container {
  position: absolute;
  z-index: 1; }
.grid-row {
  margin-bottom: 15px;
}
.grid-row:after {
    content: "";
    display: block;
    clear: both;
}
.grid-cell {
  width: 106.25px;
  height: 106.25px;
  margin-right: 15px;
  float: left;
  background: #0099CC;
}
.tile-container {
  position: absolute;
  z-index: 2; }
.tile, .tile .tile-inner {
  width: 107px;
  height: 107px;
  line-height: 107px; }
.tile.tile-position-1-1 {
  transform: translate(0px, 0px); }
.tile.tile-position-1-2 {
  transform: translate(0px, 121px); }
.tile.tile-position-1-3 {
  transform: translate(0px, 242px); }
.tile.tile-position-1-4 {
  transform: translate(0px, 363px); }
.tile.tile-position-2-1 {
  transform: translate(121px, 0px); }
.tile.tile-position-2-2 {
  transform: translate(121px, 121px); }
.tile.tile-position-2-3 {
  transform: translate(121px, 242px); }
.tile.tile-position-2-4 {
  transform: translate(121px, 363px); }
.tile.tile-position-3-1 {
  transform: translate(242px, 0px); }
.tile.tile-position-3-2 {
  transform: translate(242px, 121px); }
.tile.tile-position-3-3 {
  transform: translate(242px, 242px); }
.tile.tile-position-3-4 {
  transform: translate(242px, 363px); }
.tile.tile-position-4-1 {
  transform: translate(363px, 0px); }
.tile.tile-position-4-2 {
  transform: translate(363px, 121px); }
.tile.tile-position-4-3 {
  transform: translate(363px, 242px); }
.tile.tile-position-4-4 {
  transform: translate(363px, 363px); }
.tile {
  position: absolute;
  -webkit-transition: 100ms ease-in-out;
  -moz-transition: 100ms ease-in-out;
  transition: 100ms ease-in-out;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform; }
.tile .tile-inner {
   border-radius: 3px;
   background: #eee4da;
   text-align: center;
   font-weight: bold;
   z-index: 10;
   font-size: 55px; }

<html>
 <head>
   <title>2048</title>
   <link href="mil.css" rel="stylesheet" type="text/css">
   </head>
 <body>
   <div class="container">
      <div class="game-container">
          <div class="grid-container">
        <div class="grid-row">
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
        </div>
        <div class="grid-row">
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
        </div>
        <div class="grid-row">
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
        </div>
        <div class="grid-row">
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
        </div>
      </div>
      <div class="tile-container">
      </div>
    </div>
   </div>
   <div class="btn-container">
       <button id="left" type="button" >LEFT</button>
       <button id="right" type="button" >RIGHT</button>
       <button id="up" type="button" >UP</button>
       <button id="down" type="button" >DOWN</button>
       <button id="start" type="button" >START</button>
   </div>
   <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="mil.js"></script>
    </body>
  </html>