尽管元素的 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

我可以在同一位置单击地图两次。第二次单击时标记消失。但是，由于单击同一纬度坐标非常困难，因此看起来标记并未被删除。那是因为另一个标记被放置在该新位置上。