Блог

Главная - Вопросы по программированию - classList.remove() удаляет класс, но не его содержимое

classList.remove() удаляет класс, но не его содержимое

#javascript #css #bootstrap-4

Вопрос:

Я пытаюсь добавить один класс и удалить другой класс при нажатии кнопки запуска теста. В то время как класс ‘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? Спасибо!!

Ответ №1:

Он делает то, для чего он предназначен: удаляет класс из элемента. Если вы хотите удалить этот элемент из DOM, используйте remove() method .

Метки: ,