Jquery empty() 或 remove() 不起作用

Question

我正在开发一个用于练习 jQuery 和 PHP 的小游戏。 通过单击正确的位置，您将转到下一个问题，否则您将失败。 为了检查正确的答案，我使用带有 usemap 的 Img(img of the question)

        <img id="questions" src="../img/items/question1.png" style="height: 450px;width: 700px;" usemap="#result">
        <map name="result">
        </map>

如您所见，地图没有区域。 我在脚本中添加的那些：

$(document).ready(function(){
  var score = 0;

  var answer1 = '<area class="true" shape="circle" coords="145, 175, 40" href="#">';
  var entireImg = '<area class="false" shape="rect" coords="0, 0, 700, 450" href="#">';

  $(answer1).appendTo('map');
  $(entireImg).appendTo('map');

  $('.true').click(function(){
      score++;
      $('#questions').attr({src: "../img/items/question2.png"});

  });
  $('.false').click(function(){
      $('#questions').attr({src: "../img/items/fail.png"});
      $('.notes').show();
  });
});

如果您得到正确答案，我会为每个问题添加一个带有正确答案位置的新区域。 现在我遇到的问题是；我无法从表单中删除之前的答案区域。 到目前为止我尝试了什么：

用其他位置更改变量并将其添加到地图：

$('.true').click(function(){
    score++;
    $('#questions').attr({src: "../img/items/question2.png"});
    answer1 = '<area class="true" shape="circle" coords="200, 300, 40" href="#">';
    $(answer1).appendTo('map');
});

从地图中删除 var：

$('.true').click(function(){
    score++;
    $('#questions').attr({src: "../img/items/question2.png"});
    $('answer1').remove();
});

移除添加的元素：

$('.true').click(function(){
    score++;
    $('<area class="true" shape="circle" coords="145, 175, 40" href="#">').remove();        
});

并清空该值（并清空该值并再次附加“空”值）。

这些工作都没有，据我目前所知（女巫不是那么多）我无法弄清楚（已经花了大约 2 个小时谷歌搜索）。

我把游戏放在这个链接上： http://i333180.iris.fhict.nl/demo/pages/index.php

问候

Answer 1

由于您要删除正在单击的元素，请使用：

$(".true").click(function() {
    score++;
    $(this).remove();
});