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 AJAX Basics (retiring) AJAX Concepts A Simple AJAX Example

Leor Benari
Leor Benari
628 Points

Would like to create a button that "removes" the new content

I would like there to be a button that comes along with the new content from "sidebar.html", and would like it to be able to remove the new content. I currently can't get it to show up. I wrote it this way, right above, </section>, in sidebar.html:

<button id = "newButton" onclick="removeAJAX()">Click to remove new content!</button>

I also created a new function in the script tags, but am not sure what to do with it:

function removeAJAX() {}

I would like to be able to "toggle" between the two states. Appreciate the help!

Snapshot of my work:

https://w.trhou.se/r2hdih6jeo

2 Answers

What David Bath said... except you don't put the hash/pound symbol (#) in the string for document.getElementById(), and you would probably want to 'show' the button again:

function removeAJAX() {
  document.getElementById('load').style.display = "none";
  document.getElementById('ajax').innerHTML = '';
}
David Bath
David Bath
25,940 Points

Ha, you're right. I was combining jQuery and vanilla js. oops.

David Bath
David Bath
25,940 Points

First I would remove the space before and after the "=" for the button id. Then why don't you try

function removeAJAX() {
  document.getElementById('#ajax').innerHTML = '';
}