2017-10-09 93 views
-4

我想学JS,我决定做一个真正的应用程序,以便我可以学习,而我正在做一些东西。我试图做一个TODO列表应用程序,我做了添加项目,但我无法弄清楚如何删除项目时,他们被点击。如何从列表中删除添加的项目?

下面的代码iteself:

我将要做的

<input id= "input" class="form-control" placeholder="Add items to your TODO list." type="text"> 

    <button id="button" class="button btn btn-primary btn-block">Add</button> 

    <div class="items"> 
     <ul id= "listGroup" class="list-group"> 
     </ul> 
    </div> <!-- JS Items !--> 
</div> <!-- End Div --> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
<script src="app.js"></script> 

JS:

var button1 = document.getElementById("button") 

button1.addEventListener("click", addItem) 

function addItem() { 

    let item = document.getElementById("input").value 
    let add = document.getElementById("listGroup") 

    let makeLi = document.createElement("li") 
    let makeText = document.createTextNode(item) 
    makeLi.className += "list-group-item" 

    let icon = document.createElement("i") 
    icon.className += "fa fa-times" 

    add.appendChild(makeLi).appendChild(makeText) 
} 

function revomeItem() { 
} 
+1

你应该使用分号,你也拼写错误删除你的函数名 – Shard

+0

好家伙,它不是这个问题,我不知道如何删除已添加的项目。 –

+2

我知道......我只是指出了这一点,没有必要对那些想要帮助你的人产生敌意 – Shard

回答

0
var div1 = document.getElementById("div-01") 
    div1.addEventListener("click", removeItem); 
    function removeItem(e){ 
     e.target.remove(); 
    } 

这应该工作..

+0

我应该用getElementById选择那个元素,你能解释一下吗? 它的listGroup,我发现它。谢谢。 :) –

+0

我很高兴你自己做到了:)。你很快学习:) – Gautam

+1

谢谢你的男人。 :) –

0
makeLi.onclick = function(){ 
this.remove(); 
}; 
+0

这没有奏效。你能解释更多吗? –