leaflet.draw 垃圾按钮删除所有多边形并保存

使用javascript，如何更改leaflet.draw“垃圾桶”按钮以删除所有已绘制并自动保存的多边形。下面是我实现的代码，但它是一个完整的黑客。它会删除活动多边形，但是在删除对象后，当我单击“垃圾箱”图标时，控制台中开始出现错误NotFoundError: Node was not found and TypeError: this._deletedLayers is null

map.on('draw:editstart', function (e) {
            if(e.handler == 'remove' && typeof drawnItem != 'undefined' && drawnItem !== null){
                if(window.console) window.console.log('Drawing deleted...');
                if(typeof drawnItem != 'undefined' && drawnItem !== null){
                    drawnItems.removeLayer(drawnItem);
                }
                $('.leaflet-draw.leaflet-control .leaflet-draw-actions').hide();
                $('.leaflet-popup-pane .leaflet-draw-tooltip').remove();
            }
        });

使用自定义控件解决了我自己的问题（感谢 stackexchange -https://gis.stackexchange.com/questions/60576/custom-leaflet-controls https://gis.stackexchange.com/questions/60576/custom-leaflet-controls):

更新！添加了 @SpiderWan 建议（谢谢！），因此不需要自定义 CSS。此外，该事件之前已附加到整个控制栏。相反，仅附加到 controlUI 按钮本身。

JavaScript：

L.Control.RemoveAll = L.Control.extend({
        options: {
            position: 'topleft',
        },

        onAdd: function (map) {
            var controlDiv = L.DomUtil.create('div', 'leaflet-control leaflet-bar');
            var controlUI = L.DomUtil.create('a', 'leaflet-draw-edit-remove', controlDiv);
            controlUI.title = 'Remove all drawn items';
            controlUI.setAttribute('href', '#');

            L.DomEvent
                .addListener(controlUI, 'click', L.DomEvent.stopPropagation)
                .addListener(controlUI, 'click', L.DomEvent.preventDefault)
                .addListener(controlUI, 'click', function () {
                    drawnItems.clearLayers();
                    if(window.console) window.console.log('Drawings deleted...');
                });
            return controlDiv;
        }
    });

removeAllControl = new L.Control.RemoveAll();
map.addControl(removeAllControl);