如何使用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刪除動態生成的類？

回答

相關問題