how to dynamically delete and add values to array

Question

I have three buttons. All i need is to add into array a corresponding value by the clicking on the button but if the value already exists in my array, I need to remove it from my array. My code works only if we use it twice (add and delete) the same button. But if we use it with differents - it brokes. Try it with example below. What is the reason to that behavior ?
Only pure JavaScript.

let buttons = document.querySelectorAll('.string')
let array = []
let value = ''

buttons.forEach(el => el.addEventListener('click', () => {
  value = el.innerHTML
  for (i = 0; array.length + 1; i++) {
    if (array[i] === value) {
      delete array[i]
      array = array.filter(x => x) // clear empty values
      console.log('deleted', array)
    } else {
      array.push(value)
      console.log('added', array)
    }
    break
  }
}))

<div class="block">
  <div class="string">some</div>
  <div class="string">else</div>
  <div class="string">other</div>
</div>

Liftoff · Accepted Answer · 2021-10-15 09:33:31Z

It's not working as you expect because if the value doesn't match the first element in the array, it is pushed and the loop breaks. (Your loop always breaks after the first index anyway...)

Instead, you can just use Array.prototype.indexOf to get the index of the element if it exists in the array and then delete that index if it exists or push it if it doesn't.

You can also use Array.prototype.splice(index, deleteCount) to remove the index you don't want instead of doing delete and Array.prototype.filter.

let buttons = document.querySelectorAll('.string')
let array = []
let value = ''

buttons.forEach(el => el.addEventListener('click', () => {
  value = el.innerHTML
  let i = array.indexOf(value);
  if(i > -1)
  {
    array.splice(i, 1);
    console.log('deleted', array)
  }
  else
  {
    array.push(value)
    console.log('added', array)
  }
  
}))

<div class="block">
  <div class="string">some</div>
  <div class="string">else</div>
  <div class="string">other</div>
</div>

If you had your heart set on using a for loop instead, I also fixed your original snippet to make it work using the loop you had:

let buttons = document.querySelectorAll('.string')
let array = []
let value = ''

buttons.forEach(el => el.addEventListener('click', () => {
  value = el.innerHTML
  if(array.length < 1)
  {
    array.push(value)
    console.log("added", array)
    return
  }
  
  for (i = 0; i < array.length; i++) {
    if (array[i] === value) {
      array.splice(i, 1)
      console.log('deleted', array)
      break
    } else if (i == array.length - 1) {
      array.push(value)
      console.log('added', array)
      break
    }
  }
}))

<div class="block">
  <div class="string">some</div>
  <div class="string">else</div>
  <div class="string">other</div>
</div>

DecPK · Accepted Answer · 2021-10-15 09:50:53Z

1

1) You can make it more efficient if you use Set here, because accessing the value is much better than accessing the value from array.

2) Better to use textContent instead of innerHTML.

let buttons = document.querySelectorAll('.string')
let array = [];
const set = new Set();

buttons.forEach(el => el.addEventListener('click', () => {
  const text = el.textContent;
  if (!set.has(text)) {
    set.add(text);
    array.push(text);
  } else {
    const index = array.indexOf(text);
    array.splice(index, 1);
    set.delete(text);
  }
  console.log(array);
}))

<div class="block">
  <div class="string">some</div>
  <div class="string">else</div>
  <div class="string">other</div>
</div>

answered Oct 15, 2021 at 9:50

DecPK

25.4k6 gold badges32 silver badges46 bronze badges

Collectives™ on Stack Overflow

how to dynamically delete and add values to array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related