кнопки удалить и редактировать

Question

При нажатии на кнопку Удалить, данный блок исчезает. При нажатии на Редактировать блок переходит в состояние редактирования

    let deleteBNT = document.addEventListener("click", function(){
        document.getElementsByName('btn-delete')
        deleteBNT.parentNode.removeChild(deleteBNT);
    deleteBNT = document.getElementsByName('btn-delete')
    });

    let editBNT = document.addEventListener('click', function () {
    
    })

.cotainer {
    background: #BFBFBF;
    display: flex;
    width: 400px;
    height: 250px;
    margin: 15px;
}

.delete {
    width: 50px;
    height: 50px;
}

.edit {
    width: 50px;
    height: 50px;
}

textarea {
    width: 350px;
    height: 120px;
    justify-content: center;
    background: #BFBFBF;
}
.activ{
    background: #ffffff;
}

<div class="cotainer">
    <div class="block">
        <button class="delete" name="btn-delete">delete</button>
        <button class="edit" name="btn-edit">edit</button>
        <textarea readonly>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, cumque ea illum impedit itaque labore laudantium quam quod reprehenderit sunt.</textarea>
    </div>
</div>
<div class="cotainer">
    <div class="block">
        <button class="delete " name="btn-delete">delete</button>
        <button class="edit" name="btn-edit">edit</button>
        <textarea readonly>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cumque deleniti distinctio dolor eos est, fuga rem sequi ullam velit.</textarea>
    </div>
</div>

<div class="cotainer">
    <div class="block">
        <button class="delete" name="btn-delete">delete</button>
        <button class="edit" name="btn-edit">edit</button>
        <textarea readonly>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias atque aut cum, exercitationem fugiat magni molestias praesentium tenetur totam voluptatibus.</textarea>
    </div>
</div>

как реализовать удаление блока и как реализовать что бы при нажании на "edit" в "textarea" удалялся атрибут "readonly"

   function removeDiv(btnstate){
        let DelDiv = document.getElementsByClassName('blocks')
        DelDiv.parentNode.removeChild(DelDiv)
    }

Answer 1

let deleteBNT = document.addEventListener( - ??

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Return value

undefined

document.querySelectorAll('.cotainer .delete').forEach(del =>
  del.addEventListener('click', function(e) {
    this.closest('.cotainer').remove();
  })
);

.cotainer {
  background: #BFBFBF;
  display: flex;
  width: 400px;
  height: 250px;
  margin: 15px;
}

.delete {
  width: 50px;
  height: 50px;
}

.edit {
  width: 50px;
  height: 50px;
}

textarea {
  width: 350px;
  height: 120px;
  justify-content: center;
  background: #BFBFBF;
}

.activ {
  background: #ffffff;
}

<div class="cotainer">
  <div class="block">
    <button class="delete" name="btn-delete">delete</button>
    <button class="edit" name="btn-edit">edit</button>
    <textarea readonly>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, cumque ea illum impedit itaque labore laudantium quam quod reprehenderit sunt.</textarea>
  </div>
</div>

<div class="cotainer">
  <div class="block">
    <button class="delete " name="btn-delete">delete</button>
    <button class="edit" name="btn-edit">edit</button>
    <textarea readonly>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cumque deleniti distinctio dolor eos est, fuga rem sequi ullam velit.</textarea>
  </div>
</div>

<div class="cotainer">
  <div class="block">
    <button class="delete" name="btn-delete">delete</button>
    <button class="edit" name="btn-edit">edit</button>
    <textarea readonly>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias atque aut cum, exercitationem fugiat magni molestias praesentium tenetur totam voluptatibus.</textarea>
  </div>
</div>

Answer 2

    document.querySelectorAll('.cotainer').forEach(cotainer => {
  const textarea = cotainer.querySelector('textarea');
  cotainer.querySelector('.edit').addEventListener('click', () => textarea.removeAttribute('readonly'));
  textarea.onblur = () => textarea.setAttribute('readonly', 'readonly');
});

БЛОГ НА HUSL

кнопки удалить и редактировать

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