Как сделать удаление div через кнопку?

Question

Надо сделать удаление карточки. Пробовала через parentElement, не получается.

Вот js:

    let link = el.parentElement;
    let element = document.createElement('div');
      element.className = "mini_box";
      element.innerHTML = "боксик";
      element.id ="id";
   
   link.appendChild(element);
       // alert("Работает!");
}

function removeDiv(el) {

  let revDiv = el.parentElement;
  revDiv.remove();
}

и вот html:

<!DOCTYPE html>
<html>
<head>
    <meta accesskey="UTF-8">
    <title>Jarvis</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
        <div class="Box_body" id="container">
            <!---->

            <!-- <button type="button" class="button" id="buttonJS" onclick="addDiv()">Добавить "Боксик"</button>  -->

            <div  class="box cell-box" id="container1" >BOX1 
                <button type="button" class="button" id="buttonJS" onclick="addDiv(this)">+</button>
                <div class="mini_box js_card"  draggable="true">
                <button type="button" class="bat" id="minus" onclick="removeDiv()">-</button>   
                    боксик </div>
                <div class="mini_box js_card" id="box1" draggable="true">боксик</div>
            </div>  

            <!---->

            <div class="box cell-box" id="container2" >BOX2
                <button class="button" id="buttonJS" onclick="addDiv(this)">+</button>
                <div class="mini_box js_card" id="box2" draggable="true" >боксик</div>
            </div> 

            <!---->

            <div class="box cell-box" id="container3" >BOX3
                <button class="button" id="buttonJS" onclick="addDiv(this)">+</button>
                <div class="mini_box js_card" id="box3" draggable="true">боксик</div>
            </div> 

        </div>
 





    <script src="script.js"></script>
</body>
</html>

Answer 1

Писать onclick в html плохая практика и на современных сайтах. Советую делать через addEventListener();

let minus = document.querySelector('#minus');
minus.addEventListener('click',removeParnet);
function removeParnet(){
    let revDiv = this.parentElement;
    revDiv.remove();
}

Если же это много элементов с определённым классом то можно сделать так

let minus = document.querySelectorAll('.class');
minus.forEach((elem)=>{
  elem.addEventListener('click',removeParent);
});
function removeParent(){
    let revDiv = this.parentElement;
    revDiv.remove();
}

БЛОГ НА HUSL

Как сделать удаление div через кнопку?

Ответы (1 шт):