Remove previous elements from DOM that are generated inside a loop

Question

Hi in the following code, how do I remove the previous element from the DOM and replace it with new elements. This should be done everytime I press the button. Currently it keeps adding new elements to the DOM everytime i press the button.

let arr = [
  {name: 'John', age: 31},
  {name: 'Eric', age: 55},
  {name: 'Kyle', age: 80},
  {name: 'Pedro', age: 44},
  {name: 'Ali', age: 35},
];

let btn = document.querySelector('button');

btn.addEventListener('click', () => {
arr.map(info => {
  let p = document.createElement('p');
  let container = document.querySelector('.container');

  if(p === undefined){
    p.remove();
  }

  p.append(info.name);
  container.append(p);
})
})

`p === undefined` will never be true. Not sure where you’re checking for “previous element”. You can replace all contents of `container` by using [`replaceChildren`](//developer.mozilla.org/docs/Web/API/Element/replaceChildren). Is that what you need or do you need some other subset of existing elements? — Sebastian Simon, Sep 02 '21 at 17:16
You’re misusing `map`. Use `forEach` if you’re not using the value produced by `map`. See [JavaScript: Difference between .forEach() and .map()](/q/34426458/4642212). — Sebastian Simon, Sep 02 '21 at 17:24
Does this answer your question? [Remove all child elements of a DOM node in JavaScript](https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript) — Sebastian Simon, Sep 02 '21 at 17:26
Are you just asking how you can iterate through the array and replace each entry with the next one when you click the button. Because at the moment you're adding _all_ of them. — Andy, Sep 02 '21 at 17:31

ManuelMB · Answer 1 · 2021-09-02T17:22:21.353

2

You need to remove the previos Html inside the container after click the button.

btn.addEventListener('click', () => {
   document.querySelector('.container').innerHTML = ''
// Your logic here
})

edited Sep 02 '21 at 17:22

answered Sep 02 '21 at 17:16

ManuelMB

1,254
2
8
16

score 1 · Answer 2 · answered Sep 02 '21 at 17:22

You can delete all the content from your container by making it's innerHTML empty.

const arr = [
  {name: 'John', age: 31},
  {name: 'Eric', age: 55},
  {name: 'Kyle', age: 80},
  {name: 'Pedro', age: 44},
  {name: 'Ali', age: 35},
];

let changes = 0;
const btn = document.getElementById('add');
btn.addEventListener('click', () => {
  const container = document.getElementById('container');
  container.innerHTML = '';
  
  arr.map(item => {
    const p = document.createElement('p');
    p.innerHTML = item.name;
    container.append(p);
  });
  
  changes++;
  btn.innerHTML = `Change element (${changes})`;
})

<div id="container">
  <p>Test element</p>
</div>
<button id="add">Change element</button>

score 0 · Answer 3 · answered Sep 02 '21 at 17:38

A closure can manage the current index of your array. If you return that closure from the handler function so that's the function that gets called from the click listener you can then click on the button knowing that the next object name will be returned.

You don't have to create new elements - you can just replace the text content of the one element you have.

const arr = [
  {name: 'John', age: 31},
  {name: 'Eric', age: 55},
  {name: 'Kyle', age: 80},
  {name: 'Pedro', age: 44},
  {name: 'Ali', age: 35},
];

const container = document.querySelector('.container');
const btn = document.querySelector('button');

btn.addEventListener('click', handler(arr), false);

function handler(arr) {
  let index = 0;
  return function () {
    if (index < arr.length) {
      container.textContent = arr[index].name;
      ++index;
    }
  }
}

<div class="container"></div>
<button>Click</button>

Remove previous elements from DOM that are generated inside a loop

3 Answers3