Как сделать так, что бы при двойном нажатии на карточку, не удалялась целая доска?

Question

Всем добрый день/вечер. Не могу сообразить, как сделать так, что бы при двойном клике на карточку, удалялась сама карточка, а не целая доска? Сделать проверку через евент как то можно, но я че то не догоняю. Прикрепляю кодпэн для наглядности. Спасибо вам за помощь)

//Добавление задач//

const lists = document.querySelectorAll('.list');
const button = document.querySelector('.button');
//Функция по добавлению наших элементов списка//
function addTask() {
  const btn = document.querySelector('.add__btn');
  const addBtn = document.querySelector('.add__item-btn');
  const cancelBtn = document.querySelector('.cancel__item-btn');
  const textaria = document.querySelector('.textarea');
  const form = document.querySelector('.form');

  let value; //Будем брать с textarea, помещать в эту переменную и выводить элементом списка


  //на btn вешаем обработчик событий, то что при клике у нас будет вызываться стрелочная функция, где будет открываться наша форма//
  btn.addEventListener('click', () => {
    form.style.display = 'block';
    btn.style.display = 'none';
    addBtn.style.display = 'none';

    textaria.addEventListener('input', e => {
      value = e.target.value;

      if (value) {
        addBtn.style.display = 'block';
      } else {
        addBtn.style.display = 'none';
      }
    });
  });

  cancelBtn.addEventListener('click', () => {
    textaria.value = '';
    value = '';
    form.style.display = 'none';
    btn.style.display = 'flex';

  });

  addBtn.addEventListener('click', () => {
    const newItem = document.createElement('div');
    newItem.classList.add('list__item');
    newItem.draggable = true;
    newItem.textContent = value;
    lists[0].append(newItem);

    textaria.value = '';
    value = '';
    form.style.display = 'none';
    btn.style.display = 'flex';

    DragNdrop();
  });
}

addTask();


//Добваление досок!//

function addBoard() {
  const boards = document.querySelector('.boards');
  const board = document.createElement('div');
  board.classList.add('boards__item');
  board.innerHTML = `
        <span contenteditable="true" class="title">Введите название</span>
        <div class="list"></div>
    `;
  boards.append(board);

  changeTitle();
  DragNdrop();
  deleteBoards();
}
button.addEventListener('click', addBoard);



//Функция для удаления текста title при клике
function changeTitle() {
  const titles = document.querySelectorAll('.title');

  titles.forEach(title => {
    title.addEventListener('click', e => e.target.textContent = '');
  });

}
changeTitle();




//Добавление DragNDrop//


let draggedItem = null;

function DragNdrop() {
  const listItems = document.querySelectorAll('.list__item');
  const lists = document.querySelectorAll('.list');

  for (let i = 0; i < listItems.length; i++) {
    const item = listItems[i];

    item.addEventListener('dragstart', () => {
      draggedItem = item;
      setTimeout(() => {
        item.style.display = 'none';
      }, 0);
    });

    item.addEventListener('dragend', () => {
      setTimeout(() => {
        item.style.display = 'block';
        draggedItem = null;
      }, 0);
    });

    item.addEventListener('dblclick', () => {
      item.remove();
    });


    for (let j = 0; j < lists.length; j++) {
      const list = lists[j];

      list.addEventListener('dragover', e => {
        e.preventDefault();
      });

      list.addEventListener('dragenter', function(e) {
        e.preventDefault();
        this.style.backgroundColor = 'rgba(0,0,0,.1)';
      });

      list.addEventListener('dragleave', function(e) {
        this.style.backgroundColor = 'rgba(0,0,0,.0)';
      });

      list.addEventListener('drop', function(e) {
        this.style.backgroundColor = 'rgba(0,0,0,.0)';
        this.append(draggedItem);
      });

    }
  }


}
DragNdrop();


function deleteBoards() {
  const boardsItem = document.querySelectorAll('.boards__item');
  for (let k = 0; k < boardsItem.length; k++) {
    const dlBoards = boardsItem[k];

    dlBoards.addEventListener('dblclick', () => {
      dlBoards.remove();
    });
  }
}
deleteBoards();

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', 'Helvetica', 'sans-serif';
  overflow: hidden;
}

.app {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  padding: 55px 0;
  background-color: black;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.app .boards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.app .boards__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-item-align: baseline;
  align-self: baseline;
  max-width: 280px;
  width: 100%;
  background-color: rgba(30, 212, 233, 0.4);
  margin: 0 15px;
  padding: 10px;
  -webkit-transition: .3s all ease;
  transition: .3s all ease;
  border-radius: 3px;
}

.app .boards__item .title {
  padding: 5px;
  color: white;
}

.app .boards__item .title:focus {
  outline: 1px solid lavender;
}

.app .boards__item .list {
  min-height: 40px;
}

.app .boards__item .list__item {
  background-color: #fefefe;
  border-radius: 3px;
  padding: 10px;
  text-align: center;
  margin: 4px 0;
  cursor: pointer;
  font-weight: 400;
  font-size: 14px;
  outline: none;
  border: none;
}

.app .boards__item .form {
  border-radius: 3px;
  margin-top: auto;
  display: none;
}

.app .boards__item .form .textarea {
  resize: none;
  height: 60px;
  border-radius: 3px;
  border: none;
  background: white;
  padding: 10px;
  width: 100%;
}

.app .boards__item .form .textarea:focus {
  outline: none;
}

.app .boards__item .form .buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.app .boards__item .form .buttons .add__item-btn {
  background: #0d88da;
  border: none;
  height: 35px;
  cursor: pointer;
  color: white;
  border-radius: 3px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-right: 10px;
  padding: 0 15px;
}

.app .boards__item .form .buttons .cancel__item-btn {
  border: none;
  padding: 0 10px;
  background: #a0110c;
  height: 35px;
  cursor: pointer;
  color: white;
  border-radius: 3px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 95px;
  margin-left: auto;
}

.app .boards__item .add__btn {
  height: 30px;
  background: rgba(253, 3, 241, 0.6);
  border-radius: 3px;
  margin-top: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 12px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-left: 10px;
  color: white;
}

.app .boards__item .add__btn span {
  font-size: 20px;
  margin-right: 10px;
  color: wheat;
}

.app .button {
  height: 35px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: rgba(84, 237, 2, 0.6);
  border: none;
  position: absolute;
  bottom: 50px;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  color: wheat;
  border-radius: 3px;
  font-size: 14px;
  width: 200px;
  cursor: pointer;
  padding: 10px;
}

<body>
  <div class="app">
    <div class="boards">
      <div class="boards__item">
        <span contenteditable="true" class="title">Введите название</span>
        <div class="list">
          <div class="list__item" draggable="true">Стартовая карточка</div>
        </div>

        <div class="form">
          <textarea class="textarea" placeholder="Введите название для этой карточки"></textarea>
          <div class="buttons">
            <button class="add__item-btn">Добавить карточку</button>
            <button class="cancel__item-btn">Отмена</button>
          </div>
        </div>

        <div class="add__btn"><span> + </span>Добавить картчоку</div>

      </div>
    </div>
    <div class="button">Добавить доску</div>
  </div>
  <script src="./js/main.js"></script>
</body>

БЛОГ НА HUSL

Как сделать так, что бы при двойном нажатии на карточку, не удалялась целая доска?

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