CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nehil Mistry
Nehil Mistry

Reputation: 1109

Embed Button on image using DOM

I want to embed button on image using dom. There will be multiple images having multiple button on it which deletes image on click.

I want something like this - JSFiddle

Code I tried: 

var div = document.createElement('div');
var parent = document.getElementById('images1');
var btn = document.createElement('input');
btn.type = 'button';
btn.className="multiple",
div.style.cssText = "position: relative; margin-bottom: 10px ; width: 100%;";
btn.style.cssText = " position: absolute; top: 10px; background-image: url(http://totravelistolearn.in/wp-content/themes/travel/images/cross-512.png); width: 20px; height: 20px; border: 0; background-size: 100%; background-repeat: no-repeat;";
//textbox.placeholder = 'Add details about attached Image';     
//btn.value = "Remove";                         
btn.onclick = removeImage;
img = new Image();
img.style.display = 'block';
img.className = 'hi1';
img.style.cssText = 'height: 100px; width: 100px; position: relative;';
img.src = results[i];                       
div.appendChild(div);   
div.appendChild(img);                           
div.appendChild(btn);

Function to remove image - 

function removeImage(){
    $$(this).prev("img").remove();  
    $$(this).remove();  
    div.parentNode.removeChild(div);
}

Upvotes: 0

Views: 232

Answers (3)

Sarath Babu Nuthimadugu
Sarath Babu Nuthimadugu

Reputation: 881

As I Understand , written this code please check once.

function createItem() {
    div = document.createElement("div");
    div.setAttribute("class", "parent");
    image = document.createElement("img");
    image.src = "http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg";
    image.style.width = "100%";
    btn = document.createElement("button");
    btn.setAttribute("class", "MyButton");
    var textnode = document.createTextNode("X");
    btn.appendChild(textnode);
    btn.style.position = "absolute";
    btn.style.left = "10px";
    btn.style.left = "10px";
    div.appendChild(image);
    div.appendChild(btn);
    div.style.width = "100px";
    div.style.height = "100px";
    div.style.overflow = "hidden";
    div.style.marginBottom = "10px";
    document.body.appendChild(div);
}
createItem();
createItem();
createItem();
parentDiv = document.getElementsByClassName("parent");
console.log(parentDiv.length);
buttonObject = document.getElementsByClassName("MyButton");
for (var i = 0; i < buttonObject.length; i++) {
    buttonObject[i].id = i;
    buttonObject[i].onclick = function() {
        myId = this.getAttribute("id");
        parentDiv[myId].remove()
    }
}

Upvotes: 0

Amin Jafari
Amin Jafari

Reputation: 7207

you need to use class instead of id, also closest() will do the job for you: DEMO

$('.myButton').click(function(){
    $(this).closest('.MyImage').remove();
});

Upvotes: 1

Patel
Patel

Reputation: 1478

On button click, you can remove the div that contains that image and button, like this : 

$('.myButton').on('click', function() {
    $(this).closest('div.MyImage').remove(); 
});

As, I wouldn't advice using same id on multiple elements in one page, I have changed them to classes and then worked through that. I'd suggest you do the same, if your use-case allows you to.

Here is the updated Fiddle

Upvotes: 0

Related Questions