Js как удалить только что созданный элемент при нажатии на него

Question

function addText (col){
  let elem = document.createElement('div');
  elem.innerHTML = col;
  ul1.appendChild(elem);
}

function deleteText (col){
  elem.remove; //жалкая попытка
}

but.addEventListener("click", function(e){
  let nothing = addText(col.value);
});

<input type="text"id="col">
<button id="but">я кнопка</button>
<ul id="ul1"></ul>

Задание было такое - есть кнопка, поле ввода и <.ul.>. Надо сделать

написанное в поле добавлялось в <.ul.> на клик
contextmenu не работало
при нажатии правым кликом на элемент в списке он удалялся

Я сделал первые два, но я вообще не понимаю как сделать третье, подскажите способ как можно удалить элемент на клик

Answer 1

function addText (col){
  let elem = document.createElement('div');
  elem.innerHTML = col;
  elem.addEventListener('click', deleteText);
  ul1.appendChild(elem);
}

function deleteText(){
  this.remove();
}

but.addEventListener("click", function(e){
  let nothing = addText(col.value);
});

<input type="text"id="col">
<button id="but">я кнопка</button>
<ul id="ul1"></ul>

Answer 2

const btn = document.getElementById('but');
const col = document.getElementById('col');
const ul1 = document.getElementById('ul1');

// функция создания элемента списка
const makeListItem = (content) => {
  const el = document.createElement('li');
  el.textContent = content;
  el.addEventListener('mousedown', deleteSelf);
  return el;
};

// удаляем элемент по клику, если клавиша - правая кнопка
const deleteSelf = (ev) => {
  if (ev.which === 3) {
    ev.target.remove();
  }
};

// создаем элемент и добавляем в список
const addText = (col) => {
  const elem = makeListItem(col);
  ul1.append(elem);
};

// добавляем элемент и сбрасываем значение
but.addEventListener('click', () => {
  addText(col.value);
  col.value = '';
});

// отключение контекстного меню
ul1.addEventListener('contextmenu', (ev) => {
  ev.preventDefault();
});

// отключение выделения, которое тоже вызывает контекстное меню
ul1.addEventListener('mousemove', (ev) => {
  ev.preventDefault();
});

<input type="text" id="col" />
<button id="but">я кнопка</button>
<ul id="ul1"></ul>

БЛОГ НА HUSL

Js как удалить только что созданный элемент при нажатии на него

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