We Keep Coding

I want to use vanilla JS to remove the parent element of the button I'm pressing on click

I created a meme generator that accepts text and images and puts them all together. The generator creates a unique ID for each 'meme' and also adds buttons that show up on hover to "delete" the meme. I used vanilla JS to create this and therefore had to layer a few different child divs on top of one another: image, top text, bottom text using z-index.
I am struggling, however, to get the button to delete the parent div. I want to be able to click that delete button, and have the parent div deleted so that the button goes away, along with image and text. picture below + code snippets.
I attemped to do it with vanilla javascript, by adding a closeTheMeme function on click to each button:
let deleteBtns = document.getElementsByClassName('.delete');
function closeTheMeme (){
this.parentElement.parentElement.removeChild();
};
for(let i=0;i<deleteBtns.length;i++){
deleteBtns[i].addEventListener("click",closeTheMeme);
}
No errors on console...Including the rest of the JS below so you can see how the elements are created on click of the meme generator.
'use strict';
let count=0;
// SUBMIT FORM
document.getElementById('memeInput').addEventListener('submit',function(e){
count++;
//prevent default
e.preventDefault();
//set image, top, and bottom to variables we can work with
let bottomText = document.getElementById('bottomText').value;
createMeme();
})
function createMeme(){
//create a meme section with an ID of the number of times the button was clicked, and add it to the meme section
let meme = document.createElement("DIV");
document.body.appendChild(meme);
meme.setAttribute("id", "meme"+count);
//create an image, set that image to equal the link, give it an id based on form submits, set image.src equal to the link
let img = document.createElement("IMG");
img.setAttribute("id","image"+count);
let imageLink = document.getElementById('imageLink').value;
meme.appendChild(img);
document.getElementById("image"+count).src=imageLink;
//set top text variable equal to the ID of toptext. value(form submission)
let topText = document.getElementById('topText').value;
let top = document.createElement('DIV');
top.setAttribute("id","topText"+ count);
meme.appendChild(top);
top.innerHTML = topText;
//set bottom text variable equal to the ID of toptext.value form submission
let bottomText = document.getElementById('bottomText').value;
let bottom = document.createElement('DIV');
bottom.setAttribute("id","bottomText" + count);
meme.appendChild(bottom);
bottom.innerHTML = bottomText;
//add a button that deletes the meme in the same way as above
let deleteButton = document.createElement("BUTTON");
deleteButton.classList.add("delete");
deleteButton.innerHTML = "Delete";
meme.appendChild(deleteButton);
//styling and position
meme.classList.add("meme");
top.classList.add("topWords");
bottom.classList.add("bottomWords");
};
let deleteBtns = document.getElementsByClassName('.delete');
function closeTheMeme (){
this.parentElement.parentElement.removeChild();
};
for(let i=0;i<deleteBtns.length;i++){
deleteBtns[i].addEventListener("click",closeTheMeme);
}

You select the buttons when the page loads. You created no buttons so it is not possible for it to work since there is nothing to bind an event to.
Since you are making the buttons, add the event there.
const deleteButton = document.createElement("BUTTON");
deleteButton.addEventListener("click", function () {
this.closest("div").remove();
});
Other option is event delegation
document.body.addEventListener("click", function (e) {
const btn = e.target.closest(".delete");
if (btn) btn.closest("div").remove();
});

Javascript How to delete element when button is clicked

I'm trying to make my basic to do list better and I want to be able to delete a task when a button is clicked. How can I go about doing this? I've given the button dynamic ID's but cant seem to find out how to return that specific ID when a specific button is clicked.
Javascript
let Task = [];
function addTask(){
//assign input to array
var task = document.getElementById("userInput").value;
Task.push(task);
//creates node and shows where to find value
let node = document.createElement("li");
let textNode = document.createTextNode(
document.getElementById("userInput").value
);
//create button for text node to delete
const btn = document.createElement('button');
btn.innerHTML = 'Delete';
//adds task to webpage
node.appendChild(textNode);
document.getElementById("myList").appendChild(node);
//Adds button to webpage, gives button dynamic ID
document.getElementById("myList").appendChild(btn).id = Task.length;
}

If I understand correctly what you want is to assign a dynamic ID and return that ID by clicking the button, correct?
In this case you can try something like:
// Adds button to webpage, gives button dynamic ID
document.getElementById("myList").appendChild(btn);
btn.setAttribute("id", "myCustomId");
document.getElementById("myList").appendChild(btn);
btn.setAttribute("onclick", "alert('Current button ID: '+this.id)");

JavaScript create span element inside div

The following is the HTML that does what I want. It displays category: and beneath a value that I send in JavaScript.
<div id="category-order-id" class="additional-order-info">
<!-- <span class="additional-order-info-grey">category:</span>
Clothes -->
</div>
And here is my JavaScript
let orderCategory = document.getElementById("category-order-id");
orderCategory.textContent = `${order.category}`;
let categorySpan = document.createElement("span");
categorySpan.setAttribute("class", "additional-order-info-grey");
categorySpan.textContent = "category:";
orderCategory.appendChild(categorySpan);
What this code does, it that it first displays Clothes value that I send with JavaScript and beneath it display category.
Why I am creating a span element here is because if I set textContent of orderCategory it wil not display the span at all.
What am I doing wrong here?

textContent property replaces all the content in the element. If you want to keep order.category and "category:" as content, you need to use the appendChild function:
let orderCategory = document.getElementById("category-order-id");
const catTextContent = document.createElement("span");
catTextContent.textContent = order.category;
let categorySpan = document.createElement("span");
categorySpan.setAttribute("class", "additional-order-info-grey");
categorySpan.textContent = "category:";
orderCategory.appendChild(catTextContent);
orderCategory.appendChild(categorySpan);

How to add icon in a cell before text

I want to add to the table cell a Font-Awesome icon. But I need to insert it before this cell text. How to do it via JavaScript or Jquery?
That's my code:
var song_nameL = tr.insertCell(0);
song_nameL.innerHTML = songName;
var fa_times = song_nameL.appendChild(document.createElement("i"));
fa_times.className = "fa fa-times";
As you see, it appears after the text. And if I put song_nameL.innerHTML = songName; to the end of this code, there will be no icon.
I tried to increase zIndex of icon, but it didn't help.

You have to prepend that <i> element,
var fa_times = song_nameL.insertAdjacentHTML('afterbegin',"<i class='fa fa-times'></i>"));
by using .insertAdjacentHTML("position", "htmlString");

The HTML code for the <i> element should be in front of / before the song name, so just do:
song_nameL.innerHTML = '<i class="fa fa-times"></i>' + song_nameL;

if you need the object you could use:
var fa_times = document.createElement("i");
fa_times.className = "fa fa-times";
song_nameL.insertBefore(fa_times, song_nameL.childNodes[0]);

add html text with javascript

i am adding a input file tag and a link using a javascript function, works great. Now i want to add also a radio button and a text whit this radio... i can add the radio whit no problems, but the text... idk how.
here is the code...
addCampo = function () {
nDiv = document.createElement('div');
nDiv.className = 'archivo';
nDiv.id = 'file' + (++numero);
nCampo = document.createElement('input');
nCampo.name = 'archivos[]';
nCampo.type = 'file';
a = document.createElement('a');
a.name = nDiv.id;
a.href = '#';
a.onclick = elimCamp;
a.innerHTML = ' Eliminar';
portada = document.createElement('input');
portada.name = 'portada';
portada.type = 'radio';
portada.value = '1';
nDiv.appendChild(nCampo);
nDiv.appendChild(portada);
// HERE I WANT A SIMPLE TEXT SAYING WHATS DOES THE RADIO =)
nDiv.appendChild(a);
container = document.getElementById('adjuntos');
container.appendChild(nDiv);
}
this is working just fine! the only thing i dont know is how to add text whitout tags...

You need
text = document.createTextNode('what the radio does');
nDiv.appendChild(text);
Although it's better to use a label, because then you don't have to sharp-shoot the radio button. In that case you'd need:
portada.id = 'portada';
text = document.createElement('label');
text.innerText = 'what the radio does';
text.for = 'portada';
nDiv.appendChild(text);
Edit: as mentioned in the comments, innerText is not necessarily supported by all browsers, sorry! Just use innerHTML instead, use textContent if you don't care about old versions of IE, or create a text node and add it to the label node.