prev() does not make sense

Based on your later question I'm not sure if you still want these questions answered but I'll try.

Here's the code from this video:

//1, Hide spoiler
$(".spoiler span").hide();
//2, Add a button
$(".spoiler").append("<button>Reveal Spoiler!</button>");
//3, When button pressed
$("button").click(function(){
  //3.1, Show spoiler next to the button clicked
  $(this).prev().show();
  //3.2, Get rid of button
  $(this).remove();
});

Now if you're viewing this page in your browser and you right click to view the page source then all you will see is the original html source file. You will not see the buttons. However, if you view the html using your browser's developer tools you will see the following html before any user interaction:

<p class="spoiler">
    <!--Spoiler:-->
    <span style="display: none;">Darth Vader is Luke Skywalker's Father! Noooooooooooo!</span>
    <button>Reveal Spoiler!</button>
</p>

A couple of things to note. When the first part of the script is executed, the .hide() method on the span's, jQuery adds an inline style to the span's setting display: none. Which hides them and removes them from the document flow.

The second thing is that the button element is definitely there. The second part of the code is dynamically adding these buttons in after the page loads So the moment that second code statement finishes executing the button's now exist in the html and they come right after the span's because the .append() method was used.

So hopefully it makes sense now how prev() was used and why it was able to work. The span is the previous sibling to the button The way you know this then is by either examining the js files or inspecting the html in your browsers dev tools. You can not know it by looking at the html source.

This is what the html looks like after I click on the first button:

<p class="spoiler">
    <span style="display: inline;">Darth Vader is Luke Skywalker's Father! Noooooooooooo!</span>
</p>

Notice the button is now gone because of .remove() and the display of the span has been set back to inline so we can see it again. This is what the .show() method did.

The use of $(this)

When a button is clicked on, that click handler is going to be called. We need to know which button was clicked on so we can show the correct span and also remove the correct button. $(this) is a reference to the button that was clicked on.

Inside the click handler you can't do something like this: $('button').remove(); because that will remove all the buttons on the page. $(this).remove(); will only remove the button that had received the click.

Let me know if anything is still unclear.