CODEWITHSUNDEEP
javascriptjquery
Warrior
Warrior

Reputation: 37

jQuery .remove() issue

I tried making a little game in JS and jQuery(note: I am a beginner in both of these languages), and I made a function to delete your save. And I use some text to make sure that they confirm their action. And when I go delete it, it just won't. Here's my HTML:

function wipeSave() {
  p.innerHTML = "Are you sure you want to wipe(delete) your save? <button onclick='deleteSave()'>Yes</button> <button onclick='leave()'>No</button>";
  $('.settings').append(p);
}

function leave() {
  $('.settings').remove(p);
}

function deleteSave() {
  localStorage.setItem('coins', 0);
  localStorage.setItem('cps', 0);
  localStorage.setItem('cpc', 1);
  localStorage.setItem('cpcPrice', 25);
  localStorage.setItem('cpsPrice', 50);
  $('.settings').remove(p);
  load();
  //Everything was declared in another JS file that is loaded before this one.
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hide settings">
  <button onclick="wipeSave()">Wipe your save (think about it twice, you won't be able to get it back) 
      </button>
</div>

I tried other solutions, but none actually worked.

Upvotes: 0

Views: 86

Answers (3)

Hien Nguyen
Hien Nguyen

Reputation: 18975

You should create a p tag outside <p id="test"></p>

And remove p tag using $('.settings p').remove();

var p = document.getElementById("test");
function wipeSave() {
  p.innerHTML = "Are you sure you want to wipe(delete) your save? <button onclick='deleteSave()'>Yes</button> <button onclick='leave()'>No</button>";
  $('.settings').append(p);
}

function leave() {
  $('.settings').remove(p);
}

function deleteSave() {

  localStorage.setItem('coins', 0);
  localStorage.setItem('cps', 0);
  localStorage.setItem('cpc', 1);
  localStorage.setItem('cpcPrice', 25);
  localStorage.setItem('cpsPrice', 50);
$('.settings p').remove();  
  load();
  //Everything was declared in another JS file that is loaded before this one.
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="test"></p>
<div class="hide settings">
  <button onclick="wipeSave()">Wipe your save (think about it twice, you won't be able to get it back) 
      </button>
</div>

Upvotes: 0

Rakesh Hiray
Rakesh Hiray

Reputation: 721

Try this..

Replace

$('.settings').remove(p);

With

$('.settings').remove();

Upvotes: 0

Lapskaus
Lapskaus

Reputation: 1721

Your variable p is bound to the scope of the wipeSave function only! So when you want to remove the <p> tag from your .settings element you need to select it like so:

$('.settings').find('p').remove(); // find the <p> tag in your settings container and remove it

Upvotes: 0

Related Questions