CODEWITHSUNDEEP
javascript
sauebonden
sauebonden

Reputation: 1

Remove checked checkboxes

I am making a To-do list, where I want to be able to add new tasks, and delete tasks that are checked off. However, it seems my function just deletes all tasks, not just the ones that are checked off. Neither does it seem to allow new tasks to be added.

html:

<h1 id="title"> To-do list</h1>
<div id="task_area">
</div>
<input type="text" id="putin"></input>
<button id="add">add</button>

javascript:

<button id="clear">Clear completed tasks</button>

var tasks = document.getElementById("task_area")
var new_task = document.getElementById("add")
var clear = document.getElementById("clear")

new_task.addEventListener("click", function() {
    var putin = document.getElementById("putin")

    var input = document.createElement('input')
    input.type = "checkbox"

    var label = document.createElement('label')
    label.appendChild(document.createTextNode(putin.value))

    task_area.appendChild(input)
    task_area.appendChild(label)


})

clear.addEventListener("click", function() {
    for (i = 0; i < task_area.children.length; i++) {
        if (task_area.children[i].checked === true) {

            task_area.remove(tasks.children[i])
        }

    }


})

jsfiddle: https://jsfiddle.net/4coxL3um/

Upvotes: 0

Views: 2308

Answers (3)

Jayesh Goyani
Jayesh Goyani

Reputation: 11154

Please try with the below code snippet. Below code will help you to remove selected checkbox with label.

<body>
    <h1 id="title">To-do list</h1>
    <div id="task_area">
    </div>
    <input type="text" id="putin" />
    <button id="add">add</button>

    <button id="clear">Clear completed tasks</button>
    <script>

        var tasks = document.getElementById("task_area")
        var new_task = document.getElementById("add")
        var clear = document.getElementById("clear")

        new_task.addEventListener("click", function () {
            var putin = document.getElementById("putin")

            var input = document.createElement('input')
            input.type = "checkbox"

            var label = document.createElement('label')
            label.appendChild(document.createTextNode(putin.value))

            task_area.appendChild(input)
            task_area.appendChild(label)

            //document.getElementById("task_area").innerHTML = putin.value
        })

        clear.addEventListener("click", function () {
            for (i = 0; i < task_area.children.length; i++) {
                if (task_area.children[i].checked === true) {
                    tasks.children[i].nextSibling.remove();
                    tasks.children[i].remove();

                }

            }
        })

    </script>
</body>

Please let me know if any concern.

Upvotes: 0

Rahat Ahmed
Rahat Ahmed

Reputation: 2180

.remove removes the element you are calling it from, and doesn't take an argument for what to remove. The following:

task_area.remove(tasks.children[i])

should be

tasks.children[i].remove()

EDIT: As Mononess commented below, this will only remove the checkboxes and not the labels. While you could delete both using Jayesh Goyani's answer below, it's probably better that each input/label pair be wrapped in a single div or span for easier management.

Upvotes: 1

Dan Truitt
Dan Truitt

Reputation: 107

You could try adding an event listener to each child of task_area that calls the below function. Haven't gotten a chance to test it out, and may not fulfill all of your requirements, but should get the job done.

function removeClicked() {
    this.parentNode.removeChild(this);
}

Upvotes: 0

Related Questions