Не удается удалить элемент, хотя идентификатор элемента правильный?

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

Ваш идентификатор содержит специальные символы (в частности, точку). См. документацию :

Если идентификатор содержит символы, такие как точки или двоеточия, вы должны экранировать эти символы с обратной косой чертой.

(Это потому, что . будет интерпретироваться как селектор класса: #42.123456 означает выбор элементов с идентификатором 42 и классом 123456, например.)

Кроме того, он начинается с числа, которое технически недопустимо (см. пункт 6.2 здесь ):

Жетоны 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().

По моему мнению, значение, подобное этому, не должно быть идентификатором в любом случае, я бы использовал вместо атрибута или просто сохраните ссылку на элемент напрямую:

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>.

Answer 2

Я могу дважды щелкнуть карту в том же месте. Маркер исчезает при втором щелчке.

Однако, поскольку щелкнуть по той же координате широты довольно сложно, может показаться, что маркер не удаляется. Тогда это потому, что другой маркер находится на этом новом месте.