Develop Reference

H1 within DIV not responding to ActionListener which is set for DIV - pure JavaScript

So basicily what I am trying to do is to set ActionListener for whole div that I'm generating after some user action. Inside of that div I have an h1 marker and some text. When I click on the h1 the ActionListener is not responding. If I click anywhere else inside of div everything is working properly. I am setting ActionListener for parent div with id "list".
document.getElementById("list").addEventListener("click", function(event) {
if ( event.target.className === 'note') {
var id = event.target.id.slice(-1);
document.getElementById("title").value = titles[id];
document.getElementById("typedtext").value = notes[id];
}
});
this is how I generate the DIV:
const divNote = document.createElement("div");
const h1 = document.createElement("H1");
h1.setAttribute("id", "h" + number_of_notes);
const titleNode = document.createTextNode(title);
h1.appendChild(titleNode);
const textNode = document.createTextNode(text);
divNote.classList.add("note");
divNote.setAttribute("id", "n" + number_of_notes);
divNote.appendChild(h1);
divNote.appendChild(textNode);
document.getElementById("list").appendChild(divNote);
How to make the whole div to be sensitive to ActionListener?

You shouldn't update the html with innerHTML, but rather append a div to your parent with appendChild.
Here's what it would look like:
const myElement = document.createElement("div");
myElement.classList.add("note");
/* Other stuff to create the div... */
document.getElementById("list").appendChild(myElement)
The problem with modifying the innerHTML is that this will overwrite any previous DOM and all of your eventListeners will be detached.
cf: addEventListener gone after appending innerHTML

Clicking a button to update text in JavaScript

<div id="div1"></div>
<button id="addText" onclick="addText()">Add Text</button><br>
I'm trying to have this button call this function to update a text field. I don't want it to go to an action page or anything. The display aspect isn't even important. I'm just trying to find out how to update a variable in the background with a button click.
function addText(){
// create a new div element
var newDiv = document.createElement("div");
// and give it some content
var newContent = document.createTextNode("Hi there and greetings!");
// add the text node to the newly created div
newDiv.appendChild(newContent);
// add the newly created element and its content into the DOM
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
}

Try this
function addText(){
document.getElementById("div1").innerHTML = "your change text";
}

Dom Traversing the Dom with JavaScript but event not hitting the Html Element

I want to add delete functionality to a button on an Li element that is dynamically created by Javascript but I can't seem to be able to get the event listener to hit the target button.
I tried adding it right away by doing
var trashButton = document.getElementsByClassName("deleteListItemButton");
trashButton.addEventListener('click',removeLiItem);
but I got an unhandled exception error
var idForLiElement =1;
document.getElementById("addTaskId").addEventListener('click', function(){
var valueFromTextBox = document.getElementById("textBoxId").value;
if(valueFromTextBox) addItemToDo(valueFromTextBox);
});
function addItemToDo(valueFromTextBox){
var unorderedList = document.getElementById("toDoId")
var listElement = document.createElement("li");
listElement.className ="listItem";
listElement.innerHTML = valueFromTextBox;
listElement.id =Number(idForLiElement);
idForLiElement ++;
//puts the newest list element before the last element
unorderedList.insertBefore(listElement, unorderedList.childNodes[0]);
//creates the div that will contain both buttons in each list element
var buttonsContainer = document.createElement("div");
buttonsContainer.className ="listItemButtonContainer";
//creates the delete button and assigns it a class name
var deleteButton = document.createElement("Button")
deleteButton.className ="deleteListItemButton";
//creates the complete button and assigns it a class name
var completeButton = document.createElement("Button")
completeButton.className ="completeListItemButton";
//creates the delete image tag and assigns it a class name
var trashImageTag = document.createElement("i")
trashImageTag.className = "fa fa-trash fa-2x";
//creates the check mark button and assigns it a class name
var checkMarkImageTag = document.createElement("i")
checkMarkImageTag.className= "fa fa-check fa-2x";
//appends delete image tag to delete button
deleteButton.appendChild(trashImageTag);
//appends check mark image tag to complete button
completeButton.appendChild(checkMarkImageTag);
//appends delete button to button container
buttonsContainer.appendChild(deleteButton);
//appends complete button to button container
buttonsContainer.appendChild(completeButton)
//appends button container to list element
listElement.appendChild(buttonsContainer);
};
var trashButton = document.getElementsByClassName("deleteListItemButton");
for (i = 0; i < trashButton.length; i++) {
trashButton[i].addEventListener('click',removeLiItem)
};
function removeLiItem(e){
console.log(this)
};
I just want the event listener to hit console.log so I know the button is working

Attach the event to the element you've just created
deleteButton.addEventListener('click', function() { console.log('hit!') })

I want to add delete functionality to a button on an Li element that is dynamically created by javascript but I cant seem to be able to get the event listener to hit the target button.
The elements are dynamically created, so by the time the elements are created, the for loop where you add the event listeners has already executed.
This is what event propogation is for. Let the parent element (ul) listen to event clicks instead of having each child hold the responsibility. That way it doesnt matter how many children elements are added, momma (parent element) will always be listening for clicks.
You can do something like this:
// on your ul element
const itemList = document.querySelector(".item-list");
// listen for click on here
itemList.addEventListener('click', removeLiItem);
// you can access the actual element through the event's `target`
function removeLiItem (event) {
if (event.target.classList.contains('deleteListItemButton') {
// remove element
}
}

DOM: Delete newly created 'article' element with newly created delete button within onclick event?

I have one section element that contains one article element. Also, I have one input button with 'onclick' event. Whenever this event fired, a new article element appended to the section element with unique id.
The newArticle element contains a label, text box and a delete button. All these three elements get created within the on-click event.
document.getElementById("addRow").onclick = function () {
var newCustomerlbl = document.createElement("label");
newCustomerlbl.innerHTML = "Cutomer Name: ";
var newCustomertxt = document.createElement("input");
newCustomertxt.setAttribute("type", "text");
var delBtn = document.createElement("input");
delBtn.setAttribute("type", "button");
delBtn.setAttribute("value", "Delete");
delBtn.setAttribute("id", "btnDelete");
var newArticle = document.createElement("article");
newArticle.appendChild(newCustomerlbl);
newArticle.appendChild(newCustomertxt);
newArticle.appendChild(delBtn);
var customerSection = document.getElementById("customerRecords");
var customerArticles = customerSection.getElementsByTagName("article");
for (var i = 0; i < customerArticles.length; i++) {
var lastDigit = i + 1;
var newArticleValue = "article" + lastDigit;
newArticle.setAttribute("id", newArticleValue);
}
customerSection.appendChild(newArticle);
}
Now what I want is whenever user click upon the newly created appended delete button, only that particular article get deleted without effecting the rest of articles.
Here is the my jsFiddle code.

If you don't want to use jQuery you can add event listeners to your buttons:
delBtn.addEventListener('click', function () {
this.parentElement.remove();
}, false);
https://jsfiddle.net/3nq1v5e1/

You need to bind an event listener on the newly created delete button. Your example code about using $(this) suggest that you are using JQuery, but then again in the rest of the code you are not using any JQuery?
If you are using JQuery, things get real simple, just add something like
$(document).on('click','.btnDelete', function(){
$(this).closest('article').remove();
});
(and remember to give the deletebutton a CLASS rather than ID, as there will be multiple delete buttons).
If you are NOT using JQuery, you need to add the event listener EVERY TIME a new delete button is created
newArticle.appendChild(delBtn);
delBtn.onclick = function(.....
etc.

Remove dynamically added checkboxes and corresponding images

I have a button which opens a file selector window. When the user selects a file, the script uploads that image to a div with a checkbox.
This is the part of the script that removes the checkbox and image, but it is currently removing the parent element as well.
$("#imageForm").on('click', 'input[value="Delete"]', function () {
$('#iso_preview').has('input:checkbox:checked').remove()
});
How can I remove all checked checkboxes and their corresponding images when the delete button is clicked?
jsFiddle

You need to alter your insert fileUpload() function so that the image is contained within the inner wrapper. Change the following lines
if (imageType.test(file.type)) {
fileTemp = document.createElement("img");
$("#iso_preview").append("<div class='ct'><input value='remove'type='checkbox'/></div>");
fileTemp.classList.add("preview_image");
} else{
fileTemp = document.createElement('div');
fileTemp.classList.add('div');
}
fileTemp.file = file;
$('#'+preview).append(fileTemp);
To this...
var container = $("<div class='ct'><input value='remove'type='checkbox'/></div>");
if (imageType.test(file.type)) {
fileTemp = document.createElement("img");
fileTemp.classList.add("preview_image");
} else{
fileTemp = document.createElement('div');
fileTemp.classList.add('div');
}
fileTemp.file = file;
container.append(fileTemp);
$("#iso_preview").append(container);
Then you need to make a slight modification in this line
$('#iso_preview').has('input:checkbox:checked').remove();
To select #iso_preview div instead of #iso_preview
$('#iso_preview div').has('input:checkbox:checked').remove();
This will remove any div elements containing a checked checkbox that is contained within #iso_preview
(Demo)