2

Using JavaScript, I have created a div element and assigned certain classes from an array which contain set of classes and I assign a class to HTML element in random order by using a random method. Now, based on some event like button click event I want to remove one particular class from set of classes that HTML element having and add a particular class.

The problem is that I don't know exact class name which needed to be removed but I know little about it like class starts with something like that. so now I need some jQuery or JavaScript code which can select that particular HTML element and remove the particular class from that HTML element on some event like button on click event.

I have written some code in onclick button handling function which in javascript for solving this problem.

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>
Shiladitya
  • 12,003
  • 15
  • 25
  • 38
mohdrafi uddin
  • 41
  • 7
  • take a look at this [link](https://stackoverflow.com/a/2178504/2417602). – vikscool May 25 '18 at 05:18
  • If you want to *remove* a class, you need to figure out complete name. Partial name can work with identifying an element, using https://www.w3schools.com/cssref/sel_attr_begin.asp. – NitinSingh May 25 '18 at 05:25
  • I suggest you to keep the position data in a JS object, and updating the view based on that object, not updating the view based on the view itself. – Teemu May 25 '18 at 05:30
  • Thanks guys and nice idea @Teemu i will surely do this but i need little bit more help on how to achieve this. – mohdrafi uddin May 26 '18 at 05:26

1 Answers1

0

The function below searches for all the elements whose class name begins with the given phrase and removes that class from class list.:

function removeClass( phrase ) {
  var element = $( '*[class^="' + phrase + '"], *[class*=" ' + phrase + '"]' );

  element.each( function () {
    var classList = $( this ).attr( 'class' ).split( ' ' );

    for ( var i = 0; i < classList.length; i++ ) {
      if ( classList[ i ].search( phrase ) != -1 ) {
        delete classList.splice( i, 1 )
      }
    }

    $( this ).attr( 'class', classList.join( ' ' ) )
  } )
}
.abcd_class {
  color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="class1 abcd_class">The phrase exists in the class list.</div>
<div class="abcd_class class1">The phrase exists in the class list.</div>
<div class="class1">The phrase does'nt exist in the class list.</div>
<div class="class1 class2 abcd">The phrase does'nt exist in the class list.</div>
<div class="abcd_class abcdclass">The phrase exists in the class list.</div>

<input name="" type="button" value="Remove Class" onclick="removeClass( 'abcd_' )" />
Kavian K.
  • 1,340
  • 1
  • 9
  • 11