尽管元素的 id 正确，但无法删除元素？

Question

当我单击地图时，它会向地图 div 添加元素，这一行：$('#map').append('<label>test:</label><input type="hidden" name="map_coords" id="' + e.latlng.lat + '" value="' + e.latlng.lat + '|' + e.latlng.lng + '"/>');但是当我再次单击时，它不会将其与此行一起删除：console.log(e.latlng.lat); $('#'+e.latlng.lat).remove();我确信console.log(e.latlng.lat);元素的 id 是正确的，但它不会删除隐藏的输入元素。console.log($('#'+e.latlng.lat));还告诉我有元素。var mymap = L.map('map').setView([42.148271, 24.750240], 17);$(document).ready(function() {    $('#map').css('width', $('.vc_custom_1538133669144').width());    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',        accessToken: 'not-needed',    }).addTo(mymap)    L.marker([42.148271, 24.750240]).addTo(mymap);    mymap.on('click', onMapClick);});function onMapClick(e) {    $('#map').append('<label>test:</label><input type="hidden" name="map_coords" id="' + e.latlng.lat + '" value="' + e.latlng.lat + '|' + e.latlng.lng + '"/>');    var marker = L.marker([e.latlng.lat, e.latlng.lng]).addTo(mymap);    marker.on('click',function(e) {        console.log(e.latlng.lat);        $('#'+e.latlng.lat).remove();        this.remove();    });}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" /><script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script><div id="map" style="height: 500px;"></div>

Answer 1

您的 ID 包含特殊字符（特别是点）。请参阅文档：

如果 id 包含句点或冒号等字符，则必须使用反斜杠转义这些字符。

（这是因为.会被解释为类选择器：例如，#42.123456意味着选择具有 ID42和类的元素。）123456

另外，它以数字开头，这在技术上是不允许的：

ID 和 NAME 令牌必须以字母 ([A-Za-z]) 开头，后可跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 ("_") 、冒号（“:”）和句点（“.”）

...但是，它仍然适用于我测试过的所有浏览器。

您有几个选择：

• 您可以使用反斜杠转义点：$('#' + e.latlng.lat.toString().replace('.', '\\.')).remove()

• 您可以[id="..."]改为查询：$('[id="' + e.latlng.lat + '"]').remove()

• 你可以使用document.getElementById：$(document.getElementById(e.latlng.lat)).remove()。

在我看来，这样的值无论如何都不应该是 ID，我会使用数据属性来代替，或者直接保留对元素的引用：

var $element = $('<div><label>test:</label><input type="hidden" name="map_coords" value="' + e.latlng.lat + '|' + e.latlng.lng + '"/></div>');

$('#map').append($element);

var marker = L.marker([e.latlng.lat, e.latlng.lng]).addTo(mymap);

marker.on('click',function(e) {

    $element.remove();

    this.remove();

});

请注意，我还将元素包装在此处<div>！实际上，如果没有它，它甚至一开始就无法工作，因为您删除的元素只是 the<input>而不是<label>.

Answer 2

我可以在同一位置单击地图两次。第二次单击时标记消失。

但是，由于单击同一纬度坐标非常困难，因此看起来标记并未被删除。那是因为另一个标记被放置在该新位置上。