Удалить li из ul | делегирование

198

28 апреля 2019, 01:10

/* 
  Дан ul, а внутри него произвольное количество li с текстом и кнопкой.  
  Сделайте так, чтобы по нажатию на кнопку, удалялся тот li в котором 
  она находится. Используйте делегирование. 
*/ 
 
let list = document.querySelector('.list'); 
list.addEventListener('click', removeItem); 
 
function removeItem(){ 
  target = event.target; 
   
  if(target.nodeName == 'BUTTON'){ 
     
  } 
}

<ul class="list"> 
  <li> 
    <button>Delete</button> 
    <span>HTML</span> 
  </li> 
  <li> 
    <button>Delete</button> 
    <span>CSS</span> 
  </li> 
  <li> 
    <button>Delete</button> 
    <span>JS</span> 
  </li> 
  <li> 
    <button>Delete</button> 
    <span>React</span> 
  </li> 
  <li> 
    <button>Delete</button> 
    <span>NodeJS</span> 
  </li> 
  <li> 
    <button>Delete</button> 
    <span>PHP</span> 
  </li> 
</ul>

нужно удалить всю li, нижимая на кнопку внутри нее

Answer 1

Для старых браузеров не забыть полифилл.

document.querySelector('.list').addEventListener('click', function (event) { 
  if (event.target.nodeName === 'BUTTON'){ 
    event.target.closest('li').remove() 
  } 
})

<ul class="list"> 
  <li> 
    <button>Delete</button> 
    <span>HTML</span> 
  </li> 
  <li> 
    <button>Delete</button> 
    <span>CSS</span> 
  </li> 
  <li> 
    <button>Delete</button> 
    <span>JS</span> 
  </li> 
  <li> 
    <button>Delete</button> 
    <span>React</span> 
  </li> 
  <li> 
    <button>Delete</button> 
    <span>NodeJS</span> 
  </li> 
  <li> 
    <button>Delete</button> 
    <span>PHP</span> 
  </li> 
</ul>

Answer 2

Пришел к ответу:

let list = document.querySelector('.list');
let btn = document.querySelector('li');
list.addEventListener('click', removeItem);
function removeItem(){
  target = event.target;
  if(target.nodeName == 'BUTTON'){
    target.parentNode.remove(target);
  }
}