Removing items from a to do list using Javascript

Question

Attempting my first Javascript project, playing around with DOM to make a To-Do List. After adding an item, how do i get the 'Remove' button to function and remove the item + the remove button. Furthermore, after a new entry is made, the list item still stays in the input field after being added. How can it be made to be blank after each list item.

And yes i know my code is kinda messy and there is most likely an easier way to create it but I understand it like this for now.

Any help is greatly appreciated. Thanks

JSFiddle Link : http://jsfiddle.net/Renay/g79ssyqv/3/

<p id="addTask"> <b><u> Tasks </u></b> </p>
<input type='text' id='inputTask'/>
<input type='button' onclick='addText()' value='Add To List'/>


function addText(){
    var input = document.getElementById('inputTask').value;
    var node=document.createElement("p");
    var textnode=document.createTextNode(input);
    node.appendChild(textnode);
    document.getElementById('addTask').appendChild(node);

    var removeTask = document.createElement('input');
    removeTask.setAttribute('type', 'button');
    removeTask.setAttribute("value", "Remove");
    removeTask.setAttribute("id", "removeButton");
    node.appendChild(removeTask);

}

Answer 1

You can simply assign event:

 removeTask.addEventListener('click', function(e) {
        node.parentNode.removeChild(node);
    });

http://jsfiddle.net/g79ssyqv/6/

Answer 2

Edited the Fiddle... just try this

FiddleLink (Should work now, button and p-tag will be removed)

HTML

<p id="addTask"> <b><u> Tasks </u></b> </p>
<input type='text' id='inputTask'/>
<input type='button' onclick='addText()' value='Add To List'/>

JS

var row = 0;
function addText(){
    var input = document.getElementById('inputTask').value;
    if(input != "")
    {
    var node=document.createElement("p");
    var textnode=document.createTextNode(input);
    node.appendChild(textnode);
        node.setAttribute("id","contentP"+row);
    document.getElementById('addTask').appendChild(node);

    var removeTask = document.createElement('input');
    removeTask.setAttribute('type', 'button');
    removeTask.setAttribute("value", "Remove");
    removeTask.setAttribute("id", "removeButton");
    removeTask.setAttribute("onClick", "deleterow("+ row +");");

    node.appendChild(removeTask);
        row++;
    }
    else
    {
        alert("Please insert a value!");
    }

}
function deleterow(ID)
{
    document.getElementById('contentP'+ID).remove();
}

Greetings from Vienna