Utilize DOM to attach a button onto an image

Question

Utilize DOM to attach a button onto an image

I am looking to add buttons onto images using DOM manipulation. Each image will have multiple buttons that, when clicked, will delete the image.

I am aiming for a functionality similar to this example - JSFiddle

This is the code I have attempted so far:

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;";
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);
}

javascript jquery html css

Answer 1

Answer №1

To achieve the desired functionality, it is recommended to use the class attribute instead of id. Utilizing the closest() method will help you accomplish this easily. Check out the DEMO for reference.

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

Answer 2

To achieve the desired functionality, it is recommended to use the class attribute instead of id. Utilizing the closest() method will help you accomplish this easily. Check out the DEMO for reference.

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

Answer 3

Answer №2

When the button is clicked, you have the ability to delete the div that holds both the image and the button. This can be accomplished with the following code snippet:

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

It is not recommended to use the same id for multiple elements on a single page. In this example, I have changed them to classes and then proceeded with the removal. I would suggest following the same approach if it fits your specific scenario.

Check out the updated JSFiddle for reference.

Answer 4

When the button is clicked, you have the ability to delete the div that holds both the image and the button. This can be accomplished with the following code snippet:

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

It is not recommended to use the same id for multiple elements on a single page. In this example, I have changed them to classes and then proceeded with the removal. I would suggest following the same approach if it fits your specific scenario.

Check out the updated JSFiddle for reference.

Answer 5

Answer №3

From my understanding, this code has been written. Kindly review it 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()
    }
}

Answer 6

From my understanding, this code has been written. Kindly review it 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()
    }
}

Utilize DOM to attach a button onto an image

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble connecting to JSTL in my JavaScript file

Adding a local image to Firebase Storage in Angular5 / Ionic3

Is it possible to create a Nuxt.js static website that incorporates a dynamic single-page application built with Vue.js

Using JavaScript to locate a child element within its parent

Text overlay effect on hovering an image

Using jQuery to dynamically insert variables into CSS styles

My JavaScript array is not working with the stringify function

Exploring various endpoints using firestore Cloud Function

Using only if-else statements and else-if conditions in JavaScript, arrange four numbers in order

Anticipate that the function parameter will correspond to a key within an object containing variable properties

JavaScript-enhanced HTML form validation

Aptana throws a fit over a script that's as empty as

What is the best way to incorporate new elements into the DOM in order to allow users to share their comments

JavaScript issue: TypeError - Information.map is not a function. Learn how to properly use .map method

Utilize javascript/jquery for transforming HTML table data to JSON

Is Angular Translate susceptible to race conditions when using static files for multi-language support?

I'm looking to create a unique combination of a line and bar chart. Any advice on how to

New posts causing Ajax functionality to cease functioning

Arrange the image in a way that flows smoothly with the text

Using Strapi to run basic raw SQL queries with MySQL