how to remove images and span dynamcially? - javascript

I am uploading images with span text dynamically inside a div.after this trying to remove specific uploaded images with its span text using below code,
var images = document.getElementsByClassName('imgclass');
for (var j = 0, leng = images.length; j < leng; j++) {
images[j].onclick = RemoveImage;
}
function RemoveImage() {
alert("here");
// var imagename = $(this).attr("src");
// alert(imagename);
$(this).remove();
$(this).find('span').remove();
//$(this).siblings().remove();
var factor = 2;
}
my problem is, the image removing fine but the span which is under that image not removing.
Here is my problem : http://jsfiddle.net/Manivasagam/72cr4bvk/39/
tell me how to solve this fix?

As you are adding img and span to a new created div, you can delete the whole div:
$(this).closest('div').remove();
JSFiddle Demo.

You add span with class "insidespan", so you may remove
$('.insidespan').remove();

Related

creating img src using JavaScript returns broken img

I iterate some JSON in order to obtain URLs of images in order to display them in a table.
The JavaScript code I'm using to do so is ( I generate a table and then populate cells in each row where the first cell in the row is an image and all the rest are strings):
for (var i = 0; i < data.result.length; i++) {
var newRow = document.createElement('tr')
newRow.classList.add('table-row')
for (var j = 0; j < data.result[i].length; j++) {
if (j == 0){
var newCell = document.createElement('img');
newCell.src = data.result[i][j];
console.log(data.result[i][j])
newCell.style.width = 50;
newCell.style.height = 50;
} else {
var newCell = document.createElement('td');
newCell.classList.add('col')
newCell.innerHTML = data.result[i][j];
}
newRow.appendChild(newCell);
}
table[0].appendChild(newRow)
}
Where data.result[i][j] contains the URL.
For example, In one of the cases I get:
newCell.src = 'https://oldschool.runescape.wiki/w/Mithril bar#/media/File:Mithril bar_detail.png'
Now, when I click on that URL it indeed displays me an image. However, when I use the code above Im getting a broken image:
Any reason that I won't show the image?
I thought maybe it is due to that preview on the website but not sure how to deal with it.
Thank you
I think the URL is not really pointing to an image.
If you go to the link and right click on the image and "open image in new tab" you get this link:
https://oldschool.runescape.wiki/images/thumb/b/b5/Mithril_bar_detail.png/1280px-Mithril_bar_detail.png?c7a7b
The image URL you provided is not rendered in the DOM. Try this one instead:
https://oldschool.runescape.wiki/images/b/b5/Mithril_bar_detail.png?c7a7b

add different background-image to elements from json array

Everything is working, but when I want to add background-image, to different elements, it's just putting last image from array, and set css backgorund to all of them with that last image.
$.get('con.php',function(data) {
var data = JSON.parse(data);
for(i = 0; i < data.length; i++) {
var div = "<div class='nemkec-dev' id='"+data[i].id+"'>"+"<h1>"+ data[i].text+"</h1>"+"<p>"+
data[i].text2+"</p>"+"<img src='images/"+data[i].image+"'/>"+"</div>";
$('body').append(div);
var image = data[i].image;
}
$.each(data, function(i, dat) {
$('.nemkec-dev').css('background-image','url(images/'+dat.image+')');
});
It shows image as element. But, when I want to set css rule it's not working.
Just appending last-image to all for background.
When creating var div you can create an inline style var div = "<div style='background-image: url(images/"+data[i].image+")'...
I am pretty sure you want to iterate over $('.nemkec-dev') elements. What you are doing now is iterating over background images and setting background image for all of .namkec-dev divs at once. So natural outcome is that after this script ends you have all .nemkec-dev elements with the last background image.
You can go with Michael Coker solution and use them in line with other variables, or do something like this:
var i = 0;
$('.nemkec-dev').each(function() {
$(this).css('background-image', data[i].image);
i++;
});

Create element for each div with a particular class

I have a couple of divs with a "isVideo" class. I can successfully attach a click event with a for loop, but I also need to create a span within each div. This is what I have:
var videos = document.getElementsByClassName("isVideo");
for (var i = 0; i < videos.length; i++) {
videos[i].addEventListener('click', playVideo, false);
var playBtn = videos[i].createElement("span");
playBtn.appendChild(videos[i]);
}
codepen: http://codepen.io/garethj/pen/bpxVKX
You are appending div inside span. You need to append spanElement inside divElement
var videos = document.getElementsByClassName("isVideo");
for (var i = 0; i < videos.length; i++) {
videos[i].addEventListener('click', playVideo, false);
var playBtn = document.createElement("span");
videos[i].appendChild(playBtn);
}
Edit: Also change videos[i].createElement to document.createElement as videos[i] does not have method createElement
Codepen Demo
It should be done in the opposite way.
Replace
playBtn.appendChild(videos[i]);
with
videos[i].appendChild(playBtn);

Adding random number of images inside div

I have a <div> and i want to add images into it. The number of images will vary randomly.
here is what i am trying to do
$(document).ready(function () {
var img = document.getElementById("img");
$('#button').click(function () {
var randomnumber = Math.floor(Math.random() * 11) + 1;
for (var i = 1; i < = randomnumber; i++) {
$(this).append(img);
}
});
});
But it is not working. Please help
here is my code JSFiddle
You should probably use clone as simon suggests, or you can create new images:
function getImage(){
var img = new Image();
img.src = "http://cdn.acidcow.com/pics/20110830/lolcats_ever_13.jpg"
img.width = 200;
return img;
}
var rand = Math.floor(Math.random() * 11) + 1,
imgContainer = $("#imgContainer"),
i;
$("#imgNo").text(rand);
for (i=0; i<rand; i++){
imgContainer.append(getImage());
}
fiddle
uhm, you aren't defining any new images. I am not sure from where you are getting your images. If you have differeny images, you can use the next loop. Besides that, the this points to the #button element. Not sure which item it is, but if it's an input button, then it won't work. you have to use a div or article or section ... as target.
$(document).ready(function () {
$('#button').click(function () {
// random number
var randomnumber = Math.floor(Math.random() * 11) + 1;
// insert images
for (var i = 1; i < = randomnumber; i++) {
// create a new img - element
var img = document.createElement('img');
// give it an id
img.attr("id","img_" + i);
// source, link
img.attr("src","your_URL_here");
// put newly created image in the div with id yourDivIdHere
$('#yourDivIdHere').append(img);
}
});
});
the id has to be unique, that's why i'm using the index of the for loop for the id of the newly created element. Having same id for multiple HTML elements can lead to issues.
#yourDivIdHere means the div with the id yourDivIdHere, like
<div id="yourDivIdHere"></div>
When you are re-using the button, simply clear the content by using $('#yourDivIdHere').empty() method if you don't want to see that old images are still there after clicking on the button.
You need to clone the image:
$(this).append( $(img).clone() );
Your way always puts the same image (only one instance!) inside of div random amount of times. So in the end it is only one image.
If you clone it every time then you will have N amount of images
You are getting elements by id, so appended element is always the same element with id="img". Read about jQuery find() to find all elements.

simple hover and hover out issue in javascript

I am trying to create hover and hover out via javascript.
I have
test.prototype.build = function(){
other codes...
link.href = '#';
link.innerHTML += 'test'
link.onmouseover = hover
link.onmouseout = hoverOut
other codes...
}
function hover(){
var div = document.createElement('div');
div.class='testDiv';
div.innerHTML = 'test';
$(this).prepend(div);
}
function hoverOut(){
var div = document.getElementsByClassName('testDiv');
div.style.display='none';
}
My task is to create a hover and hover out function. My problem is I am not sure how to hide the testDiv when the user hover out of the link.
getElementsByClassName doesn't seem to work in my case. Are there better way to do this in javascript? Thanks a lot!
document.getElementsByClassName('testDiv') returns an collection, not a single object, but you can probably just use this to refer to the current object. Since you showed some jQuery in your original code, I assume that is OK here.
function hoverOut(){
$(this).find(".testDiv").hide();
}
or, in plain javascript, it could be:
function hoverOut(){
var elems = this.getElementsByClassName("testDiv");
for (var i = 0; i < elems.length; i++) {
elems[i].style.display = "none";
}
}
Your hover and hoverOut code don't match though because you're creating a new div on hover every time in hover and then only hiding it in hoverOut so they will accumulate.
If you want to remove the div you added in hoverOut(), you can do that like this:
function hoverOut(){
$(this).find(".testDiv").remove();
}
or in plain javascript:
function hoverOut(){
var elems = this.getElementsByClassName("testDiv");
for (var i = 0; i < elems.length; i++) {
elems[i].parentNode.removeChild(elems[i]);
}
}

Categories