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() {
}
var div1 = document.getElementById("div-01")
div1.addEventListener("click", removeItem);
function removeItem(e){
e.target.remove();
}
This should work..
makeLi.onclick = function(){
this.remove();
};
Related
Using Django, my buttons are created using a for loop and assigned values based on model values.
Based on which button is click, I want to update the "new_note_header" with the innerHTML of the button.
I have created the following JavaScript, which works but only when the first button clicked.
<script>
function ProjectSelect () {
var x = document.querySelector('button').innerHTML;
document.getElementById('new_note_header').innerHTML = x;
}
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('button').onclick = ProjectSelect;
});
</script>
<div class = project_container>
{% for project in projects %}
<button class = individual_project_container>
{{ project }}
</button>
{% endfor %}
</div>
<div class = note_header_container>
<div class = new_note_header, id = new_note_header>
New Note
</div>
</div>
I would be grateful for any help in adapting the JavaScript so it works for all buttons clicked.
querySelector will take the FIRST element that satisfies the selector
You could use querySelectorAll and assign a click event handler to each, but I recommend using delegation:
document.addEventListener('DOMContentLoaded', function() {
const nnHead = document.getElementById('new_note_header');
document.getElementById("project_container").addEventListener("click", e => {
const tgt = e.target.closest("button");
if (!tgt.matches(".individual_project_container")) return; // not a button
nnHead.textContent = tgt.textContent.trim();
});
});
<div class="project_container" id="project_container">
<button class="individual_project_container">Project 1</button>
<button class="individual_project_container">Project 2</button>
<button class="individual_project_container">Project 3</button>
</div>
<div class="note_header_container">
<div class="new_note_header" id="new_note_header">
New Note
</div>
</div>
I'm trying to create a to-do list app but i cant seems to append the user data to my list
html:
<div id="Html">
<input id="input-task" placeholder="New Task" >
<button id="add-btn" type="button" onclick="newTask()">
Add Tasks
</button>
</div>
<div>
<ul id="task-table">
<li>Task 1</li>
</ul>
</div>
separate javascript file:
const inputTask = document.getElementById('input-task').value;
var li = document.createElement('li');
var t = document.createTextNode('inputTask');
li.appendChild(t);
document.getElementById('task-table').appendChild(li);
}
inputTask is variable containing the text value but you using that as if it is string, remove the quotes around it.
I will also suggest you to avoid inline event handler, you can use addEventListener() instead like the following way:
document.getElementById('add-btn').addEventListener('click', newTask);
function newTask(){
const inputTask = document.getElementById('input-task').value;
var li = document.createElement('li');
var t = document.createTextNode(inputTask); //remove quotes here
li.appendChild(t);
document.getElementById('task-table').appendChild(li);
}
<div id="Html">
<input id="input-task" placeholder="New Task" >
<button id="add-btn" type="button">
Add Tasks
</button>
</div>
<div>
<ul id="task-table">
<li>Task 1</li>
</ul>
</div>
Try like this.
You should call newTask function and append child in it.
const inputTask = document.getElementById('input-task').value;
function newTask(){
var li = document.createElement('li');
var t = document.createTextNode(document.getElementById('input-task').value);
li.appendChild(t);
document.getElementById('task-table').appendChild(li);
document.getElementById('input-task').value="";
}
<div id="Html">
<input id="input-task" placeholder="New Task" >
<button id="add-btn" type="button" onclick="newTask()">
Add Tasks
</button>
</div>
<div>
<ul id="task-table">
<li>Task 1</li>
</ul>
</div>
Nothing wrong in your code!
Simple fixed this line
var t = document.createTextNode('inputTask');
Remove ('' quotes)
var t = document.createTextNode(inputTask);
And Final thing I don't know may be you have already done this but I want to mention this
Wrap this code inside the newTask() function
Example: -
function newTask(){
const inputTask = document.getElementById('input-task').value;
var li = document.createElement('li');
var t = document.createTextNode(inputTask);
li.appendChild(t);
document.getElementById('task-table').appendChild(li);
}
I am creating a todo app. I create add button which is working perfectly fine. But, the trash button it keeps on returning null value.
I can not find solution on the google i didnt find the solution.
Can Anybody Help me here
var todoList = document.getElementById("todolist");
var addBtn = document.getElementById("add-btn");
var taskName = document.getElementById("task-name");
var trashBtn = document.getElementById("trash");
addBtn.addEventListener("click", addFunction);
function addFunction() {
var task = document.createElement("div");
task.classList.add("task");
var tname = document.createElement("li");
tname.setAttribute("id", "li-task");
var trash = document.createElement("BUTTON");
trash.setAttribute("id", "trash");
trash.innerHTML = '<i class="fas fa-trash"></i>';
tname.appendChild(trash);
task.appendChild(tname);
todoList.appendChild(task);
}
console.log(trashBtn);
console.log(addBtn);
<div class="main">
<header>
<h1>Doer's List</h1>
</header>
<div class="add-task">
<form>
<input type="text" id="task-name">
<button id="add-btn" type="button"><i class="fas fa-plus-circle"></i></button>
</form>
</div>
<div class="to-do-list">
<ul id="todolist"></ul>
</div>
</div>
Help Here
You need to get the Trash Button by id AFTER you've added it to the page.
I instead of creating new variable trashBtn, I used the variable which is define when creating Elemnt.
I am facing a problem within JavaScript when I attempt to delete a li, it will delete the entire ul. Does anyone know a solution for this?
const add = document.querySelector(".add");
add.addEventListener("click", function() {
const cont = document.querySelector(".menu");
const input = document.querySelector(".put");
const newli = document.createElement("LI");
const text = document.createTextNode(input.value);
cont.append(newli);
newli.appendChild(text);
})
const remove = document.querySelector(".remove");
remove.addEventListener("click", function() {
const df = document.querySelector(".menu");
df.remove(newli);
})
<div class="parent-row">
<h1>Add a new Post </h1>
<div>
<input type="text" class="put">
<button class="add">Add a Post</button>
<button class="remove">Remove a Post</button>
</div>
<ul class="menu">
<li>Albenis</li>
</ul>
</div>
</div>
</div>
</div>
Solution
HTML:
<div class="parent-row">
<h1>Add a new Post</h1>
<div>
<input type="text" class="put" />
<button class="add">Add a Post</button>
<button class="remove">Remove a Post</button>
</div>
<ul class="menu">
<li>Albenis</li>
</ul>
</div>
JavaScript:
const add = document.querySelector(".add");
const remove = document.querySelector(".remove");
add.addEventListener("click", function () {
const cont = document.querySelector(".menu");
const input = document.querySelector(".put");
const newli = document.createElement("LI");
newli.innerText = input.value;
cont.append(newli);
});
remove.addEventListener("click", function () {
const df = document.querySelector(".menu");
df.firstElementChild.remove();
});
Working example: https://codesandbox.io/s/pensive-almeida-z82lr?file=/index.html:262-561
Your error
Your error was you were trying to get the newli constant from outside of its code block remember that const variables are scoped to there block.
A different way of doing this
This way is a bit more simplified and allows you to delete anyone of the posts not just the last added.
const postBtn = document.querySelector('#post')
const list = document.querySelector('#list')
postBtn.addEventListener('click', () => {
const text = document.querySelector('#post-text')
list.innerHTML += `<li>${text.value} <button id="remove" onclick="remove(event)">remove</button></li>`
text.value = ''
})
const remove = (e) => {
e.target.parentElement.remove()
}
<div>
<h1>Make a post</h1>
<input id="post-text" type="text" placeholder="Text"><button id="post">Post</button>
<ul id="list">
</ul>
</div>
I have a toDo list for the very first list, I can add elements. I can also create multiple toDo lists dynamically, but while adding here it is been added to the very first list instead of the respective list where I click. Please someone help me, I am very new to JavaScript.
$toDoList = $('#toDoList');
$newTodoList = $('#newTodoList');
$parent = $('#parent');
$ul = $('ul');
$totalList = $('.totalList');
$(".remove").click(function() {
confirm('Are you sure? do you want to delete the item') ? $(this).parent().remove() : $(this);
});
$("li").click(function() {
$(this).hasClass("addBorder") ? $(this).removeClass("addBorder") : $(this).addClass("addBorder");
});
$('body').on('click', '.add', function() {
var itemName = $('#itemName').val();
var listItem = $('<li>' + itemName + '<button type="button" class="buttonStyle">-</button></li>');
listItem.on("click", function() {
confirm('Are you sure? do you want to delete the item') ? $(this).remove() : $(this);
});
$totalList.append(listItem);
$('#itemName').val('');
});
index = 1;
i = 1;
function addNewList() {
var newList = $('<div class="listParent" id="newList"><button type="button" class="addNewList" onClick="addNewList()">+</button><h2>My ToDO List!!</h2><ul id="toDoList" class="totalList"><li>Java script<button type="button" class="remove buttonStyle">-</button></li><li>Angular<button type="button" class="remove buttonStyle">-</button></li><li>Jasmine<button type="button" class="remove buttonStyle">-</button></li></ul><div class="inputText"><input type="text" id="itemName" class="leftmargin10" name="ListItem"><button type="button" id="addButton" class="buttonPlacement buttonStyle add">+</button></input></div></div>');
$('#newList').clone().attr('id', 'newList' + index++)
.insertAfter($('[id^=newList]:last'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" id="parent">
<div class="listParent" id="newList">
<button type="button" class="addNewList" onclick="addNewList()">+</button>
<h2>My ToDO List!!</h2>
<ul id="toDoList" class="totalList">
<li>Java script<button type="button" class="remove buttonStyle">-</button></li>
<li>Angular<button type="button" class="remove buttonStyle">-</button></li>
<li>Jasmine<button type="button" class="remove buttonStyle">-</button></li>
</ul>
<div class="inputText">
<input type="text" id="itemName" class="leftmargin10" name="ListItem"><button type="button" id="addButton" class="buttonPlacement buttonStyle add">+</button></input>
</div>
</div>
<!-- New list -->
The first thing I saw was that you are using multiple times the same id.
So I removed them all, since the "to do list" is to be cloned.
I simplified your code... I hope this will help.
// Remove (Delegate the clicks)
$(document).on("click",".remove",function(){
confirm('Are you sure? do you want to delete the item')? $(this).parent().remove():$(this);
});
// Li border (Delegate the clicks)
$(document).on("click","li",function(){
$(this).hasClass("addBorder")?$(this).removeClass("addBorder"):$(this).addClass("addBorder");
});
// Add a to do item to the list where the add button has been clicked.
$('body').on('click', '.add', function () {
// Find the relevant elements.
var thisParent = $(this).closest(".listParent");
var newTodoVal = thisParent.find(".newToDo");
var thisList = thisParent.find(".totalList");
// If there in a name inputed.
if(newTodoVal.val() !=""){
var listItem = "<li>"+newTodoVal.val()+"<button type='button' class='buttonStyle'>-</button>";
thisList.append(listItem);
newTodoVal.val('');
}
});
// Clone the last list to create a new one.
$(".addNewList").on("click",function(){
var lastList = $(".listParent").last();
lastList.clone().insertAfter(lastList);
});
.addBorder{
border:1px solid black;
max-width:10em;
}
.leftmargin10{
margin-left:10px;
}
.buttonStyle{
margin-left:0.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<button type="button" class="addNewList">+</button>
<div class="listParent">
<h2>My ToDO List!!</h2>
<ul class="totalList">
<li>Java script<button type="button" class="remove buttonStyle">-</button></li>
<li>Angular<button type="button" class="remove buttonStyle">-</button></li>
<li>Jasmine<button type="button" class="remove buttonStyle">-</button></li>
</ul>
<div class="inputText">
<input type="text" class="leftmargin10 newToDo" name="ListItem">
<button type="button" class="buttonPlacement buttonStyle add">+</button>
</div>
</div>
<!-- New list -->
</div>
I assume that you click the + to add an item to a list.
You have this line of code:
$totalList.append(listItem);
In theory that should append listItem to every list which has class='totalList', I think you want it added only to the list where the + button was clicked, so I would change that line to
$(this).closest('.totalList').append(listItem);