Develop Reference

How can I remove elements from prepend() by click close button?

I have an interface where images is being showed by .prepend() method, I am trying to remove images one by one by click on close button and also remove all the images by one click on a button, but I have no idea how to do ?
Here is image list interface below, 3 images show as of now How can I attach close button and remove images individual and also on 1 click.
HTML:
<div id="imageList">
</div>
JS:
//Images are stored in this array as base64
var imagesBase64 = [];
// add images in the array ImagesBase64
function addToDownload() {
imagesBase64.push(dataURL);
appendImageToList(dataURL);
}
const imageList = document.getElementById("imageList");
function appendImageToList(image) {
var img = document.createElement("img");
img.src = image;
imageList.prepend(img);
}

I crafted a demo that does more or less what you asked (but using jQuery).
The page gets initialized with a list of pictures hardcoded in an array. Each picture gets appended in #imageList inside its own container and a little red box is added to trap the click event when you mean to remove the picture from the list. On top of that there's a button to remove all of them at once:
//a list of img urls needed to feed the list of pictures with some
const images = ['https://www.w3schools.com/css/img_5terre.jpg', 'https://www.w3schools.com/css/img_forest.jpg', 'https://www.w3schools.com/css/img_lights.jpg', 'https://www.w3schools.com/css/img_mountains.jpg'];
//inits the imageList with pictures coming from images constant
//..so when the document is ready,
$(document).ready(() => {
//for each url picture in the images constant
images.forEach((o, i) => {
//append a picture to imageList having that url
appendImageToList(o);
});
});
//appends an image to the list (where image is a picture url)
function appendImageToList(image) {
var img = document.createElement("img");
img.src = image;
//the img will be enclosed in a container
let container = $('<div>', {
class: 'imgContainer'
});
container.append(img);
//creates the close handle for this new picture and adds an event handler on its click event
let closeHandle = $('<div>', {
class: 'closeHandle'
});
//adds content x to the close handle
closeHandle.append('<i class="fa-solid fa-circle-xmark"></i>');
closeHandle.click(() => {
//when the button is clicked, remove this image from the list
removeOneImageFromList($(event.target).closest('.imgContainer'));
});
container.append(closeHandle);
//adds the container inside the imageList
$('#imageList').prepend(container);
}
//removes all images from the list
function removeAllImages() {
$('#imageList .imgContainer').remove();
}
//removes a specific image from the list
function removeOneImageFromList(imgParentElement) {
$(imgParentElement).remove();
}
/* rule to style every single img container */
#imageList .imgContainer {
position: relative;
width: fit-content;
}
/* rule to style the close handle */
#imageList .closeHandle {
position: absolute;
top: 15px;
right: 15px;
text-align: center;
cursor: pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.slim.js"></script>
<button type="button" onclick="removeAllImages();">Remove all images</button>
<br><br>
<div id="imageList">
</div>

Adding a class based on background image name with javasript

Now I have div created with javascript this divs have a background image with a different image, I need to add a class name to each div based on background image name, Is there a way to do this in javascript or jquery?
// adding divs to mapContainer
var mapCont = document.getElementById("mapContainer");
for (var i = 0; i < 20; i++) {
var child = document.createElement("div");
child.classList.add("logo-" + i);
mapCont.appendChild(child)
}
css
#mapContainer > div.logo-3 {
background-image: url(../images/car.png);
}
#mapContainer > div.logo-4 {
background-image: url(../images/bike.png);
}
#mapContainer > div.logo-5 {
background-image: url(../images/train.png);
}
How to add a class name to each div with the same background image name in javascript without the image extension so the divs have another class with the name of background image?

If i understood your question correctly, you can get the image path from the CSS class using the following code:
var body = document.getElementsByTagName('body')[0];
var elem = document.createElement("div");
elem.classList.add('logo-3');
body.appendChild(elem);
alert(getComputedStyle(elem).getPropertyValue('background-image'));
body.removeChild(elem);
It will alert the background-image style. Use the contents to add it to your classList. You might want to get the path with a regex.
Make sure to add the element to the DOM to get the properties, otherwise it will return null.

change a div css class name of add to result and give it orange color on click

change a div css class name of add to result and give it orange color on click
function changeclass(){
var name = document.getElementByClassName("add").name.className = "result",name.color = "orange"

Following your logic:
function changeClass(){
// get the element
var name = document.getElementsByClassName("add")[0];
// overwrite the element's existing classname
name.className = "result";
// set the element's style attribute with the desired attributes
name.style.color = "orange";
}
It would be better not to set the style attribute directly with JS. You are changing the class from .add to .result, so it makes more sense to use the class to set the styles:
.result {
color: orange;
}

Function that adds a div of a particular class

In my CSS I have a particular class for a div
div.videl
{
width: 80%;
margin: 0 auto;
background-color: #39275b;
color: white;
padding: 5px;
}
and then a function to add divs of that class:
this.addVideo = function()
{
var newVidElement = document.createElement("div");
newVidElement.class = "videl";
newVidElement.innerHTML = "<p>(" + ++this.numVids + ") <textarea class='vidtxt'></textarea></p>"
document.getElementById("vidplaydiv").appendChild(newVidElement);
}
However, for some reason, that function is not correctly applying the CSS properties when I test it out. See this page http://jaminweb.com/YoutubePlaylist.html and click the Add Another Video button. Any idea what I'm doing wrong?

className is the name of the attribute you're trying to set.
newVidElement.className = "videl";

When you don't know the property name of the HTML attribute, You can always use setAttribute, for example:
newVidElement.setAttribute('class','videl')

Change the JavaScript code as below -
this.addVideo = function()
{
var newVidElement = document.createElement("div");
newVidElement.className = "videl";
newVidElement.innerHTML = "<p>(" + ++this.numVids + ") <textarea class='vidtxt'></textarea></p>"
document.getElementById("vidplaydiv").appendChild(newVidElement);
}

How to position a div next to element with absolute position?

I am trying to create a div that can be attached to an element whenever user hover to the link
I have many links and my codes look like the following.
for loops to create many links
codes....
link.href='#';
link.innerHTML = 'test'
link.onmouseover = OnHover;
codes....
function OnHover(){
var position;
var div = document.createElement('div');
div.className='testdiv';
div.innerHTML = 'test';
position=$(div).position();
div.style.top = position['top'] + 15 + 'px';
$(this).prepend(div);
}
link element1
link element2
----
| | //add new div when hover link element2
----
link element2
link element3
my css
.testdiv{
position:absolute;
}
I want to add a new div everytime the user hover to my link and position on the left top of the element.
My code would position all the div on top instead of every element.
Are there anyway to do this? Thanks so much!

Without seeing your other JavaScript/markup I can make the following observations:
You need to set position:absolute on your new div before top will do anything.
You need to make sure link is non-position:static.
Non-dynamic styles like the above should be in your CSS, not JS.
Positioning absolutely means you shouldn't need to use $(div).position()
You're using a mix of jQuery and pure JavaScript which looks a little odd :)
JS
function OnHover() {
var position;
var div = $('<div></div>');
div.addClass('testdiv');
div.html('test');
div.css('top', 15);
$(this).prepend(div);
}
CSS
.testdiv {
position:absolute;
}
a.testanchor {
position:relative;
}