Deletion of a custom function in JavaScript

Question

Deletion of a custom function in JavaScript

I have written some basic code to generate and remove an image using functions. Specifically, I need help with removing the image created by the function Generate() when a button linked to the function Reset1() is clicked. Here's the code snippet for reference:

function Generate() {
    var image = document.createElement('img');
    var div = document.getElementById('flex-box-gen');
    image.src = "https://thecatapi.com/api/images/get?format=src&type=gif&size=small";
    div.appendChild(image);
}

function Reset1() {
    document.getElementById('Generate').remove();
}

javascript html css

Answer 1

Answer №1

To easily remove your image element in the second function, consider assigning an id to it and using that:

function generate() {
    var image=document.createElement("img");
    image.id = "image-01";
    ...
}

function reset() {
    var image = document.getElementById("image-01");
    var parent = image.parentNode;

    parent.removeChild(image);
}

If there are no other elements in your containing div, you can simply empty it:

function reset() {
    document.getElementById("flex-box-gen").innerHTML = "";
}

Answer 2

To easily remove your image element in the second function, consider assigning an id to it and using that:

function generate() {
    var image=document.createElement("img");
    image.id = "image-01";
    ...
}

function reset() {
    var image = document.getElementById("image-01");
    var parent = image.parentNode;

    parent.removeChild(image);
}

If there are no other elements in your containing div, you can simply empty it:

function reset() {
    document.getElementById("flex-box-gen").innerHTML = "";
}

Answer 3

Answer №2

getElementById function is used to query a DOM element, not a javascript element.

If you only have one img in your flex-box-gen, you can do the following:

var imgs = document.querySelectorAll('#flex-box-gen img')
if(imgs.length > 0){
  imgs[0].remove();
}

Make sure to include a null-check in case the image has already been removed.

Answer 4

getElementById function is used to query a DOM element, not a javascript element.

If you only have one img in your flex-box-gen, you can do the following:

var imgs = document.querySelectorAll('#flex-box-gen img')
if(imgs.length > 0){
  imgs[0].remove();
}

Make sure to include a null-check in case the image has already been removed.

Answer 5

Answer №3

let newImageId = document.createElement('id');
newImageId.setAttribute('id', "Generate");
image.appendChild(newImageId);

Please include the above code snippet inside the generate function.

Answer 6

let newImageId = document.createElement('id');
newImageId.setAttribute('id', "Generate");
image.appendChild(newImageId);

Please include the above code snippet inside the generate function.

Deletion of a custom function in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Iterating through an array and setting variables according to asynchronous code

Discovered an issue with Sentry debugging where a lengthy string is being returned as undefined

The <h1> element is not responding to the style attribute

Exploring the Canvas with Full Element Panning, Minimap Included

The submission of the Ajax form isn't functioning as expected

Customizing Attribute for Material UI TextField

Creating a hierarchical structure in HTML to represent a JSON object as a tree: techniques and best practices

"Implementing responsive design with Bootstrap's carousel through media queries

What could be causing a hydration error when utilizing a table in Next.js?

The compare function in bcryptjs will result in a false output if the passwords include numerical

1 in every 3 divs in jQuery, chosen randomly

The parent font size is influenced by the font size of the child element

The React-FontAwesome icon is unable to display when a favicon has been set

I need to know the right way to send a file encoded in Windows-1255 using Express

When the content div is clicked within the overlay div, the popup will also close

Show me a list of all the commands my bot has in discord.js

jQuery - harnessing the power of JavaScript events such as "dragover"

Nuxt.js has exceeded the maximum call stack size

Is it necessary for me to include body, html at the beginning of my CSS code?

Unexpected interactions between Socket.io and React using hooks