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

Question

当我点击 map 时，它会向 map 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 包含特殊字符(特别是点)。请参阅 documentation:

If the id contains characters like periods or colons you have to escape those characters with backslashes.

(这是因为 . 会被解释为类选择器:例如，#42.123456 表示选择 ID 为 42 且类为 123456 的元素。)

此外，它以数字开头，这在技术上是不允许的(请参阅 point 6.2 here ):

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".")

...但是，它在我测试过的所有浏览器中仍然有效。

您有几个选择:

• 您可以使用反斜杠转义点:$('#' + 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> 中!实际上，如果没有它，它从一开始就无法工作，因为您删除的元素只是 <input> 而不是 <label> 。