javascript - Jquery empty() 或 remove() 不会工作

Question

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

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

如您所见， 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();
  });
});

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

用其他位置更改变量并将其添加到 map :

$('.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');
});

从 map 中删除变量:

$('.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();
});