每次单击按钮时，地图都会附加到模态体：jQuery

Question

总结：

我正在创建一个显示用户选择结果的网页。第一个用户从给定面板中选择项目并单击添加按钮。这将创建用户所选项目的表格行（就像将项目添加到购物车一样）。如果用户选择包含“地图”，则它会在已创建的表列之一中创建一个#map 按钮。

我为地图按钮创建了模式对话框引导程序。当用户点击它时，地图会弹出，一旦从模态页脚点击“保存”按钮，它就会返回 (lat,lon,zoom) 参数。

问题：

如果用户多次选择“地图”选项。前一个地图附加到模态体。而且看起来很丑。

这里是创建表的jquery代码。

 .on('click','.addbutton', function(e) {
    $('table').find('tbody')
        .each(function(){
            var map_elements = '<td style = "text-align:center">';
            if (display_text == 'Map') {
                map_elements += '<button data-target="#map_btn_benefits_id" type="button" class="map_btn_benefits btn btn-info active" data-toggle="modal">Map</button>';
                map_elements += '<div id="map_btn_benefits_id" class="modal fade" role="dialog">';
                map_elements += '<div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title">Landscape Map</h4></div>';
                map_elements += '<div class="modal-body"><div id="map_id_benefits" style="width: 500px; height: 380px; margin: 0; padding: 0;"></div></div>';
                map_elements += '<div class="modal-footer"><button type="button" class="save-exit-benefits btn btn-primary" data-dismiss="modal">Save changes and Close</button>';
                map_elements += '</div></div></div></div>';
                map_elements += '</td>';

            }   
            else {
                map_elements += display_text+'</td>';               
            }

            console.log(map_elements);
$(this).append(
        "<tr>"+
        "<td><a class='remove-row text-danger'><i class='fa fa-times'></i></a></td>"+
        "<td style='text-align:center'>"+tree_benefits_text+"</td>"+
        map_elements+
        "<td style='text-align:center'>"+unit_text+"</td>"+
        "<td style='text-align:center'>"+dataset_text+"</td>"+
        "</tr>")

以下是创建地图的脚本

.on('click', '.map_btn_benefits', function(){

    var ml = new googleMap({element: 'map_id_benefits'});       
    var save_selection_layer= [];
    $('.save-exit-benefits').click(function () {
        save_selection_benefits.push(
        {
            lon_map: ml.map.getCenter().lon,
            lat_map: ml.map.getCenter().lat,
            zoom_map: ml.map.getZoom(),
        });   
        
    });

    console.log(save_selection_benefits);
})

假设“googleMap()”创建了一个简单的地图。我相信对于这个问题，您不需要代码。 我为我的错误解释道歉。我是 jquery 的新手。 我正在寻找我在这里缺少的逻辑。

提前致谢

Answer 1

它通过清空模态容器来工作

$('map_id_benefits').empty()