44457

how to remove dynamically loaded images in javascript

Question:

I'm loading in 3 images (named 1.jpg, 2.jpg, 3jpg) dynamically to 3 divs called "div1", "div2" and "div3".

function loadImages() { for (var i = 1; i < 3; i++ ) { var img = document.createElement("img"); img.src = "vegetables/"+i+".jpg"; img.id = "a"+i+""; var divName = "div"+i+""; document.getElementById(divName).appendChild(img); } }

That works, but the removing part I can't seem to get to work..

function removeImages() { for (var i = 1; i < 3; i++ ) { var oldImages = "a"+i+""; var divName = "div"+i+""; document.getElementById(divName).removeChild(oldImages); } }

Thank you.

Answer1:

In remove,

document.getElementById(divName).removeChild(document.getElementById(oldImages));

removeChild takes a DOM element, not an ID.

Answer2:

In your removal, "oldImages" is just a string saying "a1" or whatever. The parameter to .removeChild needs to be an actual DOM element. You need to either find it again (using document.getElementById or by traversing the children of the div node) or keep around the references to the image element.

Recommend

  • Array is saved to database as string, now need to post string into separate input fields from databa
  • trouble in receiveing byte [] from wcf ksoap2 to android
  • How to create closure (protect globals) in an animation loop?
  • access the 'd' element from an SVG object with casperjs
  • working with variables from dispatch_async
  • Loading HTML content into DIV
  • jquery multiselect doesnt work on dynamically added element into html page
  • How to load partial view via jQuery?
  • After converting my FBX file to a .gltf, the model is incredibly small, why?
  • react native create element with string
  • Why does the following throw an “Object doesn't support property or method 'importNode
  • Python PIL to extract number from image
  • Outputting SharePoint Hyperlink Column as URL
  • Getting error 'Cannot read property 'document' of undefined' while importing exp
  • Disable Kendo Autocomplete
  • How to view images from protected folder with php?
  • How do I get HTML corresponding to current DOM tree?
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • FileReader+canvas image loading problem
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Change an a tag attribute in JavaScript based on screen width
  • jquery mobile loadPage not working
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • using HTMLImports.whenReady not working in chrome
  • How to stop GridView from loading again when I press back button?
  • Authorize attributes not working in MVC 4
  • EntityFramework adding new object to nested object collection
  • costura.fody for a dll that references another dll
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?