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

What is the methodology behind stackoverflow's implementation of comments functionality?

Discovering a device's model using JavaScript

A set of four responsive divs arranged vertically

Custom input field in Material UI not communicating properly with Redux form

Filter out the selection choice that begins with 'aa' in the drop-down menu

Troubleshooting border problems with Bootstrap 3 tables

Learn how to reposition the mat-option easily

A mistake has been identified: The object could potentially be 'null'. TS2531 for window.document

The Node.js application is up and running on the Node server, but unfortunately, no output is

Tips for creating a responsive iframe without relying on aspect ratio assumptions

The <a href="#divtagid"> link is incapable of triggering the opening of the div tag when called from JavaScript

utilizing angularjs and bootstrap to manage multiple button models

Manipulating the DOM results in the SWF being reloaded

Trie-based autocomplete functionality

The fixed background-attachment feature does not function properly in Chrome when it is contained within a scrolling div

AngularJS: Toggle footer visibility with custom message

When the window is resized, the text and images become jumbled and distorted

Troubleshooting a minor JavaScript loop problem

Preventing jQuery parser from turning arrays into objects

Mastering the art of utilizing the LESS preprocessor with React Create-React-APP