Jump to content
Sign in to follow this  
Fuzzy Logic

Please don't repeat yourself

Recommended Posts

I have finally got around to learning javascript properly, after all these years of simply using ready-made scripts and having to make do when I had coding issues I could not solve...

Anyway, I am trying to get a javascript list that I have created to replace and not append? Currently, every time I use my dropdown the list adds more to the list already there, I need it to swap but can't work it out.. anyone know how to do this? Thanks

https://codepen.io/saltedm8/pen/bxEZBG?editors=1010

Share this post


Link to post
Share on other sites

You could create a function to clear the current list items:

const removeFilteredListItems = () => {
  let listItems = [...document.querySelectorAll('#demo ul li')]
  if( listItems.length > 0 ) {
    listItems.map(item => item.parentNode.removeChild(item))
  }
}

Then you can call that function before you add new items.

function concat(x) {
  removeFilteredListItems()
  let ul = document.createElement('ul');
  document.getElementById('demo').appendChild(ul);
  x.forEach(function(list) {
    let li = document.createElement('li');
    ul.appendChild(li);
    li.innerHTML += list;
  });
}

 

Share this post


Link to post
Share on other sites
3 minutes ago, Jack said:

You could create a function to clear the current list items:


const removeFilteredListItems = () => {
  let listItems = [...document.querySelectorAll('#demo ul li')]
  if( listItems.length > 0 ) {
    listItems.map(item => item.parentNode.removeChild(item))
  }
}

Then you can call that function before you add new items.


function concat(x) {
  removeFilteredListItems()
  let ul = document.createElement('ul');
  document.getElementById('demo').appendChild(ul);
  x.forEach(function(list) {
    let li = document.createElement('li');
    ul.appendChild(li);
    li.innerHTML += list;
  });
}

 

Genius! Thank you.

Just to understand the code - not sure I get the three dots before document ...document.querySelectorAll and I have not got quite as far as nodes.

Share this post


Link to post
Share on other sites
Just now, Fuzzy Logic said:

Genius! Thank you.

Just to understand the code - not sure I get the three dots before document ...document.querySelectorAll and I have not got quite as far as nodes.

Yeah sorry, I'm used to the ES6 way. If you're not using Babel, I can rewrite it in ES5 if you want. Basically the process is this:

Get all items from querySelectorAll and assign to a variable called removeFilteredListItems. Both querySelector and querySelectorAll can replace older methods like getElementByID.

Variable removeFilteredListItems will return a NodeList, which is not an array (even though it looks like one), so we need to convert it to an array before mapping over the items. That's what the three dots inside brackets are doing, but there are many other ways to do this https://toddmotto.com/a-comprehensive-dive-into-nodelists-arrays-converting-nodelists-and-understanding-the-dom.

Map, essentially takes an array, applies a callback to each item in the array (in this case removing an item), and returns a new array when all elements have been traversed. It's incredibly useful, here's an ES5 example of map.

var add = function(a, b) {
  return a + b
}

var nums = [2, 5, 6, 8]

var addNums = nums.map(function(num) {
  return add(num, 2)
})

console.log(addNums) // [4, 7, 8, 10]

There are other ways to do this too, you could use the filter() method, or have the items in an object with a 'visible' property that gets toggled. This example works for the code above well enough though.

Share this post


Link to post
Share on other sites
20 minutes ago, Jack said:

Yeah sorry, I'm used to the ES6 way. If you're not using Babel, I can rewrite it in ES5 if you want. Basically the process is this:

Get all items from querySelectorAll and assign to a variable called removeFilteredListItems. Both querySelector and querySelectorAll can replace older methods like getElementByID.

Variable removeFilteredListItems will return a NodeList, which is not an array (even though it looks like one), so we need to convert it to an array before mapping over the items. That's what the three dots inside brackets are doing, but there are many other ways to do this https://toddmotto.com/a-comprehensive-dive-into-nodelists-arrays-converting-nodelists-and-understanding-the-dom.

Map, essentially takes an array, applies a callback to each item in the array (in this case removing an item), and returns a new array when all elements have been traversed. It's incredibly useful, here's an ES5 example of map.


var add = function(a, b) {
  return a + b
}

var nums = [2, 5, 6, 8]

var addNums = nums.map(function(num) {
  return add(num, 2)
})

console.log(addNums) // [4, 7, 8, 10]

There are other ways to do this too, you could use the filter() method, or have the items in an object with a 'visible' property that gets toggled. This example works for the code above well enough though.

Nah, that is absolutely cool, thanks again, I will save this and look into that when I think I am confident enough in javascript to warrant moving on.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      59,311
    • Most Online
      4,970

    Newest Member
    link.rk01
    Joined
  • Forum Statistics

    • Total Topics
      65,996
    • Total Posts
      454,482
×