Удалить элемент в JavaScript

323

04 августа 2018, 14:40

<div> 
<li class="obj_1"></li> 
<li class="obj_1"></li>//Надо чтобы удалялся именно этот 
<li class="obJ_1"></li> 
</div>

Как сделать, чтобы элемент удалял сам себя? если точнее то как соединить remove и this чтобы удалялся именно этот элемент, по поводу removeChild знаю но это не то что нужно.

Answer 1

this.parentNode.removeChild(this);

<div> 
  <li class="obj_1">не этот</li> 
  <li class="obj_1" onclick="this.parentNode.removeChild(this)"> 
    Надо чтобы удалялся именно этот</li> 
  <li class="obJ_1">не этот</li> 
</div>

function removeThatItem() { 
  var item = document.querySelector("div li.obj_1:nth-child(2)"); 
  item.parentNode.removeChild(item); 
}

<div> 
  <li class="obj_1">не этот</li> 
  <li class="obj_1"> 
    Надо чтобы удалялся именно этот</li> 
  <li class="obJ_1">не этот</li> 
</div> 
<br/> 
<button type="button" onclick="removeThatItem()">Remove Item</button>

Answer 2

Как сделать, чтобы элемент удалял сам себя?

Проходим по всем елементам и вешаем событие, только элемент с определённым критерием будет удален, в этом примере это класс delete.

var li = document.querySelectorAll('li') 
// Event on all li elements 
li.forEach(function (e) {  
  e.addEventListener('click', function (ee) {  
     // Only class element with class delete 
     if(ee.target.classList.contains('delete')){ 
        console.log(ee.target.textContent); 
        // Node will be deleted 
        ee.target.remove(e); 
     } 
  }) 
})

<ul> 
  <li>Some text 01</li> 
  <li>Some text 02</li> 
  <li class="delete">Some text 03</li> 
  <li>Some text 04</li> 
  <li>Some text 05</li> 
</ul>