如何使用jQuery删除动态生成的类？

-2

我创建与下面的JavaScript代码和HTML动态生成html格：如何使用jQuery删除动态生成的类？

<!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 
    for (let i = 0; i < 20; i++) { 
     for (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; 
    } 
});

的问题，我遇到是在JS片断（$('.blockattribute').first().addClass('gray');）线11。我希望网格上的第一个块有.gray。该类使得背景颜色灰色，但是当我在控制台检查元素我看到我的块看起来像这样：

<div class="blockattribute red gray" style="left: 0px; top: 0px;"></div>

我的问题是，我需要删除red类，但因为它是动态创建，我无法事先选择它。有没有办法我可以看到一个jQuery类的列表，然后选择正确的？

来源

2016-11-05 Dan Rubio

前去除所有其他的色彩类别你试过：（”。blockattribute '）'$第（）addClass（' 灰色 '）removeClass（' 红色。 “）;'？ –

但是如何在页面呈现之前知道它是红色的？它可以是红色，粉红色，橙色，绿色或紫色。 –

为什么不在页面渲染后使用'$（'。blockattribute'）。first（）。removeClass（'red'）;' – Aer0

您可以添加gray像follwing

$('.blockattribute').first().removeClass(colors.join(' ')).addClass('gray');

来源

2016-11-05 18:17:41 Azim

如何使用jQuery删除动态生成的类？

回答

相关问题