jQuery或JavaScript从某个元素中删除特定的类，却不知道需要删除的确切类名

Question

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> 

Answer 1

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_' )" />