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

Posted by James Barrett
James Barrett
13,253 Points

Trying to remove an element every time a button is clicked... Not working?

I am creating a 'Random Quote Generator' project and I am struggling to remove the last quote when the button is clicked again. Here is my code:

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Random Quote Generator</title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body>
  <div class="container">
    <h1>Random Quotes Rewritten</h1>
    <p>Would you like a random sentence to send to someone or incorporate in your project? Press the button below!</p>
    <button>New quote</button>
    <div class="quotearea">

    </div>
  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>

</html>

JS:

var words = ["bunch", "of", "random", "words", "javascript",
            "william", "dark", "light", "blue", "green"];
var stringArray = [];

$("button").click(function(){
  $(".quotearea").html("");
  $(".quotearea").addClass("border");
  for(i = 0; i < words.length; i++) {
    stringArray.push(words[Math.floor(Math.random()*words.length)]);
  }
  var string = stringArray.join(' ');
  $('.quotearea').html('<p>' + string + '</p>');
});

However whenever the button is clicked, it just appends the new bunch of random words to the next. I want the previous bunch of words to be removed and I have tried using $(".quotearea").html(""); ,$(".quotearea").next().remove(); and $(".quotearea").empty(); but no luck!

Thanks, James.

2 Answers

Leslie Heinzen
Leslie Heinzen
26,662 Points

Hi James,

The reason you are getting this result is because your stringArray variable, which is stored globally, is saving all of the random words generated from previous clicks. Quick fix is to add this to the beginning of your callback function inside of the click function:

stringArray = [];

and you can remove this: 

$(".quotearea").html("");

This will reset the stringArray variable to its default empty value before adding a new set of random words. Alternatively, you could just declare 

var stringArray = [];

inside of the callback function. This seems like the more logical place for it to be, anyway, as it will be declared as empty every time the New quote button is clicked. There are some other ways you could refactor your code to make it more efficient, but this will get you the result you are looking for!

Happy coding!
Leslie

James Barrett
James Barrett
13,253 Points

Awesome, thanks for your help, makes complete sense :)

egaratkaoroprat
egaratkaoroprat
16,630 Points
egaratkaoroprat
egaratkaoroprat
16,630 Points

Hi James

I am pretty sure there is a better way. But this is a solution that I came up with this quickly.

To remove it, you could try something like this:

$('.quotearea').child('p').remove();

If it does not work for some reason (e.g. there is no <p>, as this is the first time you run it), then you might try to check it with an if condition whether <p> is there or not. If it is there, then remove it as mentioned above, and otherwise skip directly to .html().

I hope this helps!

Egarat