Javascript - нужно удалить элемент li при нажатии

-1

Мне нужна помощь с заданием, над которым я работаю. Используя JavaScript, мне нужно использовать свойство .target event в моей функции removeItem() для удаления элементов li при их нажатии. Может ли кто-нибудь помочь? Мой код ниже.Javascript - нужно удалить элемент li при нажатии

function Post(item) { 
 
     this.item = item; 
 
     this.print = function() { 
 
      var s = this.item; 
 
      return s; 
 
     } 
 
    } 
 
    var postList = []; 
 
    window.onload = init; 
 

 
    function init() { 
 
     var submitButton = document.getElementById("submitButton"); 
 
     submitButton.onclick = getAddedItem; 
 
    } 
 

 
    function getAddedItem() { 
 
     var itemInput = document.getElementById("item"); 
 
     var item = itemInput.value; 
 
     if (item == null || item == "") { 
 
      alert("Please enter an item"); 
 
      return; 
 
     } else { 
 
      var post = new Post(item); 
 
      postList.push(post); 
 
      addPostToList(post); 
 
      var theForm = document.querySelector("form"); 
 
      theForm.reset(); 
 
     } 
 

 
     function addPostToList(post) { 
 
      var postList = document.querySelector("ul"); 
 
      var li = document.createElement("li"); 
 
      li.onclick = removeItem(li); 
 
      postList.appendChild(li); 
 
      li.innerHTML = post.print(); 
 
     } 
 
    }; 
 

 
    function removeItem(li) { 
 
     var test = document.getElementsByTagName("li"); 
 
     for (i = 0; i < test.length; i++) { 
 
      test[i].onclick = function() { 
 
       var test = document.querySelector("li"); 
 
       if (test) { 
 
        var testParent = test.parentElement; 
 
        testParent.removeChild(test); 
 
       } 
 
      } 
 
     } 
 
}

p { 
 
    font-style:italic 
 
} 
 

 
li:hover { 
 
    cursor:pointer 
 
}

<!DOCTYPE html> 
 

 
<html lang="en"> 
 
<head> 
 
    <title> 
 
    </title> 
 
    <meta charset="utf-8"> 
 
</head> 
 

 
<body> 
 
    <form> 
 
     <label for="item">Add an item:</label> <input id="item" size="20" type="text"><br> 
 
     <input id="submitButton" type="button" value="Add!"> 
 
    </form> 
 

 
    <ul> 
 
    </ul> 
 

 
    <p>Click an item to remove it from the list.</p> 
 
</body> 
 
</html>

источник

2015-01-12 mpstring

Вам нужно отформатировать код и отдельный из разделов HTML и JavaScript. Это довольно непроницаемо. –

Не должно быть необходимости использовать цель события, использование 'this' в функции обработчика должно быть достаточным. – CBroe

Не согласен @CBroe 'this' в javascript - это глагол двусмысленности. По возможности избегайте использования 'this' (и его почти всегда возможно). –

Вот часть кода, чтобы изменить (см комментарии):

function addPostToList(post) { 
    var postList = document.querySelector("ul"); 
    var li = document.createElement("li"); 
    //Don't apply removeItem here. Just give the function name 
    //The event will be passed to removeItem 
    li.onclick = removeItem; 
    postList.appendChild(li); 
    li.innerHTML = post.print(); 
} 


function removeItem(e) {  
    e.target.parentElement.removeChild(e.target); 
}

Вот полный JSBin: http://jsbin.com/mivonanoga/1/

источник

2015-01-12 23:05:38

Javascript - нужно удалить элемент li при нажатии

ответ

Смежные вопросы