classList.remove() 正在删除类而不是其内容答案

【问题标题】：classList.remove() is removing the class but not its contentsclassList.remove() 正在删除类而不是其内容
【发布时间】：2021-12-10 06:08:06
【问题描述】：

我正在尝试在单击开始测验按钮时添加一个课程并删除另一个课程。虽然 'info_box' 类被成功添加，但 'start_btn' 类并没有被删除，它只是改变了位置（从 flex 到 no flex）。这是HTML

<body>
    <div class="container">
        <div class="start_btn" >
            <button type="button" class="startBtn">Start Quiz</button>
        </div>
        <div class="row info_box">
            <div class="col-md-6">
             <!--Rest of the code-->

这是CSS


/*START BUTTON BOX*/
.start_btn {
    height:80vh;
    display: flex;
    justify-content:center;
    align-items:center;
    
}


.startBtn{
    font-size: 25px;
    font-weight: 500;
    color: var(--clr-steelBlue);
    padding: 15px 30px;
    outline: none;
    border: none;
    border-radius: 5px;
    background: var(--clr-white);
    cursor: pointer;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
    pointer-events: auto;
  
}

.startBtn:focus{
    background-color: var(--clr-steelBlue);
    color:var(--clr-white);
    outline: var(--clr-steelBlue);
}

.showInfoBox.info_box{
  display: flex;
}

/* INFO BOX*/
.info_box {
    height:100vh;
    display: flex;
    justify-content:center;
    align-items:center;
    display:none;
    
}

这是javascript

const startbtn = document.querySelector(".start_btn");
const infoBox = document.querySelector(".info_box");

startbtn.addEventListener('click', function(){

    startbtn.classList.remove("start_btn");
    infoBox.classList.add("showInfoBox");
})

我检查了开发人员工具，它是这样的。 start_btn 类不存在，但 start_btn div 内的按钮仍然存在

我尝试在移除 start_btn 框之前单独移除按钮，但它不起作用我尝试创建一个单独的类来像这样删除 start_btn 但它不起作用

.hide.start_btn{
 z-index:-1; 
  pointer-events: none;

}

如何删除 start_btn 类？谢谢！！

【问题讨论】：

标签： javascript css bootstrap-4

【解决方案1】：

它做了它打算做的事情：从元素中删除类。如果要从 DOM 中删除该元素，请使用 remove() 方法。

【讨论】：