Develop Reference

Serialising an HTML element that has event handlers

I am currently making a website for a class that I am in. It is supposed to be a store, made in Pure HTML, CSS, and JavaScript (no libraries including jQuery). I am currently attempting at making a functional cart right now. My idea is to take the element that has the information about that item (image and name, but price I kept to be constant throughout to make it simpler). From here, I thought about serialising that element and saving it to localStorage so that I can load it from the cart page. When I try JSON.serialize(product) where product is the element of the item, it only ends up with "{}" and nothing else. XMLS.serialiseToString() only gives the element without the event handler. How am I supposed to make this work?
I also tried loading the event handler in the cart page too, but I cannot figure out a way to get the HTML element from a string. Could someone tell me how to make this work? I looked at a few other questions on here but it does not make much sense to me.
Edit: I got the serialisation and deserialisation working using XMLSerializer. However, I want to change the click event handler after deserialising the element. How am I supposed to make this work?

XMLSerializer should work.
You will need to provide more code for what you're doing with local storage and your event handler but based on the info you provided, I included some code with comments below.
//this is a test click handler function to see if it still works after being added to page
function testClickHandler() {
console.log('I still work after being added to document again.')
}
//initialize XML serializer
var serializer = new XMLSerializer();
//get html element from document
var html = document.querySelector('#serializemecapt');
//convert element to string
var htmlString = serializer.serializeToString(html);
//once element is converted to string you can save in local storage
//after you retrieve the element again from local storage, use the code below to insert it into your document again
//insert element back onto page
document.body.insertAdjacentHTML('afterbegin', htmlString);
<div id="serializemecapt" onclick="testClickHandler()">Click me to see if the click event still works after I'm pushed back into the document.<br/><br/></div>
Edit: If you want to change the click handler after serialization, you can do something like this (run the snippet below and see comments):
//this function will be removed before serialization
function originalFunction() {
console.log('I am the original function before serialization.')
}
//this function will be added after serialization
function newFunction() {
console.log('I am the new function after serialization.')
}
//get html element from document
var html = document.querySelector('#serializeme');
//apply originalFunction to div using addEventListener
html.addEventListener('click', originalFunction)
//new function to demonstrate serialization
function serializeHtml() {
//initialize XML serializer
var serializer = new XMLSerializer();
//remove event listener for originalFunction before serialization
html.removeEventListener('click', originalFunction)
//serialize html
var htmlString = serializer.serializeToString(html);
//insert element back onto page
document.body.insertAdjacentHTML('afterbegin', htmlString);
//change innerText on element for example purposes
html.innerText = 'I am the same div as above after serialization. I have new text and a new function. Click me now and I will run the new function.'
//add newFunction to div using addEventListener
html.addEventListener('click', newFunction)
}
//get button element from document
var serialButton = document.querySelector('#serialButton');
//apply serializeHtml function to button using addEventListener
serialButton.addEventListener('click', serializeHtml)
<div id="serializeme"><b>Click me</b> before serializing to run the original function.<br/><br/></div>
<p><b>Click button below to serialize the div above and apply a new function to the div after serialization.</b></p>
<button id="serialButton">Serialize</button>

Inserted JS elements disappear after ajax reload

I am using a WP Plugin FacepWP and want to add reset to the dropdown.
I have used JS to create elements and add the function FWP.reset('country_2').
The problem I have is that when I click reset the page reloads (AJAX I think) and I lose the elements I added by JS
$(document).ready(function(){
function addEle() {
var newElement = document.createElement("a")
newElement.className = 'wf-reset'
newElement.onclick = function() { FWP.reset('country_2')}
newElement.textContent='Reset'
var insertReset = document.querySelector('.facetwp-facet-country_2 .fs-dropdown')
console.log(newElement);
console.log(insertReset);
insertReset.appendChild(newElement)
};
window.onload = addEle;
})
I hope for my added elements to stay on click.
I believe FacetWP uses AJAX to filter and reset but it resets my added JS elements also.
Added:
On existing archive (category, tag, shop, ) or search pages, FacetWP
will automatically attempt to add a facetwp-template CSS class around
the listing. During an ajax refresh, FacetWP will only modify content
within that container element. If your pager doesn’t change after a
FacetWP refresh, then the CSS class may need to to be manually placed
so that it surrounds both the listing and pager.
Sounds like I need to find this class and do something with it to make sure ajax reload keeps the JS I added.

InsertAdjacentHTML, element saves after refresh

I am able to add the elements I want, but after I refresh they disappear. How can I get the elements to save permanently while using insertAdjacementHTML or do I need to use another method?
Sample code:
function itemAdder () {
var header = document.querySelector(".list-group");
header.insertAdjacentHTML("beforeend", '<a>Item 1</a>')
};
document.getElementById("circle-add").addEventListener("click", itemAdder)

Every time an item is added, you might save the container's current innerHTML in localStorage, and on page load, if anything exists in localStorage, populate the container with whatever's stored:
var header = document.querySelector(".list-group");
if (localStorage.headerHTML) header.innerHTML = localStorage.headerHTML;
function itemAdder () {
header.insertAdjacentHTML("beforeend", '<a>Item 1</a>')
localStorage.headerHTML = header.innerHTML;
}
document.getElementById("circle-add").addEventListener("click", itemAdder)
(hopefully you have a way to delete items as well - on deletion, use the same line localStorage.headerHTML = header.innerHTML; to save the HTML again)

Saving ID for specific onclick element

I'm trying to create a JavaScript where you write a message and the time and message appears on the website. The function doing this is "renderMessage". However, it includes an image you can click to delete that message and then I want to write all the remaining ones again. Problem is that I don't know how to save some sort of ID so I know which image was clicked so I delete the correct position in the array of messages.
The code for renderMessage is:
function renderMessage(theMessage, theMessages){
var text = document.createTextNode(theMessage.getText());
var time = document.createTextNode(theMessage.getDate());
var div = document.getElementById("writeMessages");
div.appendChild(text);
div.appendChild(time);
var image = document.createElement('img');
image.src = 'img/deletePic.png';
div.appendChild(image);
div.appendChild(document.createElement('br'));
image.onclick = function(e){
theMessages.splice(); // This is where I don't know how to remove the correct one
removeAll(theMessages); // This removes all html code in the div and writes
// the array again (hopefully this time with the correct
// element removed from it)
};
}

Firstly, thumbs up for using plain js.
I would say you enclose the message, time and the image into another element. My be a ul li block. And, when you render the messages in DOM, you set the message id as id attribute of the li so it will be something like this
<ul>
<li>Message 1 - 10:21 PM <img src="remove jpg"/></li>
<li>Message 2 - 10:22 PM <img src="remove jpg"/></li>
</ul>
and your js code can be,
image.onclick = function () {
var message_id = this.parentNode.id;
// here you got the message id.
// splice your message array and render
}
Why are you re-rendering all the messages? You could simply
// splice your message array and render
var li = this.parentNode;
li.parentNode.removeChild(li);
}

you can save the id of the message inside an attribute of the element. eg <div class="your_message_container data-id="14">...</div>
Using jquery for example you can read that attribute with $(your_selector).attr("data-id"); and write it with $(your_selector).attr("data-id", "new_value");
As an alternative, also have a look at http://api.jquery.com/jquery.data/
Edit:
i made you a fiddle with pure js: http://jsfiddle.net/A64zh/2/ Note that the id of the message element must equal the data-message-id attribute of your delete image.
the advantage of using an element attribute for storing the id is that your javascript does not depend on the html structure like it does if you are using something like this.parentNode.parentNode.removeChild.... which would need to be changed if you would add more html layers in between the two

Javascript: Deleting elements that were created with .createElement()

So when a user presses a button, I am creating elements to make a list appear on the page. However, when they press the button again the new list goes after the previous content, and the old content remains. I need to clear the previous content (which was created with .createElement()), and then insert the fresh content.
This is how I'm making the elements:
I have a <ul id="positiveUL"> in the HTML. And positiveList = document.getElementById('positiveUL')
for(var positive in positives) {
var li = document.createElement('li');
li.innerHTML = positives[positive] + ', ';
positiveList.insertBefore(li, positiveList.firstChild);
}
What I have tried:
.innerHTML = ' ';
I also tried removing childNodes with .removeChild(), but it doesn't work.
Would really appreciate any help or direction to go in. Thanks!

Hopefully I understand you, but before inserting your new content, empty the old content?
while(node.firstChild)
{
node.removeChild(node.firstChild);
}
Where node is your parent node?