javascript - How can I remove a dynamically generated class with jQuery? -
i creating dynamically generated html grid following javascript code , html:
<!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <link rel="stylesheet" href="./css/colorwalk.css"> </head> <body> <div> <div id="colorgrid"></div> </div> <div id="colorbuttons"> <button class="buttonsize white"> <button class="buttonsize red"> <button class="buttonsize green"> <button class="buttonsize orange"> <button class="buttonsize pink"> <button class="buttonsize purple"> </div> <script src="js/main.js"></script> </body> $(document).ready(function() { const colors = array.of('red', 'green', 'orange', 'pink', 'purple'); let y = 0; let x = 0 (let = 0; < 20; i++) { (let j = 0; j < 30; j++) { const randomcolor = colors[math.floor(math.random() * colors.length)]; $block = $('<div></div>').addclass('blockattribute').addclass(randomcolor).css({ left: x, top:y }); $block.appendto('#colorgrid'); x >= 580 ? x = 0 : x = x + 20 $('.blockattribute').first().addclass('gray'); } y = y + 20; } }); the problem encountering line 11 in js snippet ($('.blockattribute').first().addclass('gray');). want first block on grid have class of .gray. class makes background color gray when inspect element in console see block looks this:
<div class="blockattribute red gray" style="left: 0px; top: 0px;"></div>
my problem need remove red class because dynamically created, unable select before hand. there way can see list of jquery classes , select right one?
you can remove other color classes before adding gray follwing
$('.blockattribute').first().removeclass(colors.join(' ')).addclass('gray');
Comments
Post a Comment