Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Making Changes to the DOM Appending Nodes

Vladimir Klindić
Vladimir Klindić
19,262 Points
Posted by Vladimir Klindić
Vladimir Klindić
19,262 Points

Is there other possibility to clear input field than setting value = ""?

If you make value of input field an empty string it deletes what you have typed but you are also able to add another blank item, actually another empty string to the list. So is there other way to fix this beside adding another field with type reset in html?

1 Answer

Steven Parker
Steven Parker
229,745 Points
Steven Parker
Steven Parker
229,745 Points

You don't have to add a blank item.

Just because the box is cleared doesn't mean you have to add the blank as a new item. In fact, you can prevent adding blank items by disabling the button when the input is empty:

app.js 
  // ...existing code...
  addItemInput.value = '';
  addItemButton.disabled = true;  // add this line to button click handler
});

// then add this new handler:
addItemInput.addEventListener('input', () => {
  addItemButton.disabled = !addItemInput.value.length;
});

You may also want to add somthing like this to the CSS to make it obvious when the button is disabled:

style.css 
button:disabled {
  background: white;
  color: lightgrey;
}

Also the very next part of the course will show you how to remove items.