How to remove added item from a list?

Question

I'm trying to learn JS and I decided to make a real app so that I can learn while I'm doing some stuff. I'm trying to make a TODO list app, I made the adding items but I can't figure out how to remove items when they got clicked.

Here's the code iteself:

MY TODO'S

    <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() {
}

You should use semicolons, also you spelt remove wrong in your function name — Shardj, Oct 09 '17 at 12:34
Dude, its not the problem, i dont know how to remove the items that i added. — Burak Sümer, Oct 09 '17 at 12:35
I know... I was just pointing it out, no need to be so hostile to someone looking to help you — Shardj, Oct 09 '17 at 12:36
Oh, you got me wrong, i wasnt trying to offense you in any way. :) — Burak Sümer, Oct 09 '17 at 12:38
When you add an item, why not add an "x" or "remove" tag to that item, so then you can target that x/remove element in an event listener that can remove the todo item or mark it as finished. — Dream_Cap, Oct 09 '17 at 12:41
I dont know how to do that, as i said im still learning i hope i'll be able to someday :) — Burak Sümer, Oct 09 '17 at 12:58
If you want someone else to help you, you should take care of your question, paying attention to the grammar and posting a code section as ordered as you can. This way, the other users don't wast more time that it needs to understand your issue. And... yes, the semicolons :) You have several questions with negative score... maybe you should read [Asking](https://stackoverflow.com/help/asking) and [How do I ask a good question](https://stackoverflow.com/help/how-to-ask). — Massimiliano Kraus, Oct 09 '17 at 13:39
Possible duplicate of [JavaScript DOM remove element](https://stackoverflow.com/questions/8830839/javascript-dom-remove-element) — skwidbreth, Oct 09 '17 at 14:25

score 0 · Answer 1 · answered Oct 09 '17 at 12:38

0

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

answered Oct 09 '17 at 12:38

Jonas Wilms

132,000
20
149
151

score 0 · Accepted Answer · answered Oct 09 '17 at 12:41

0

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

This should work..

answered Oct 09 '17 at 12:41

Gautam

815
6
15

That element should i pick with getElementById exactly can you explain? Its the listGroup, i found it. Thank you. :) – Burak Sümer Oct 09 '17 at 12:53

How to remove added item from a list?

2 Answers2