Question

我有一个AJAX调用，它提供生成jQuery图的数据。每次运行此AJAX调用时，都会返回新的JSON数据并自动更新绘图。

除了绘制JSON数据之外，还有一些代码可以创建一个按钮，该按钮使用ConvertOrSave.appendChild(btn);作为子元素附加。这段代码的唯一问题是，每次进行AJAX调用时，都会附加一个新的btn。应该只需要一个按钮。

在添加新按钮之前，确保删除上一个按钮的最佳方法是什么？谢谢。这是代码：

$("#flotAverageSalePricesCity").result(function(event, data, formatted) {
if (data){
    $.ajax({ 
        url: sURL + "utility/ajaxmuniChart1c",
        type: "POST",
        data: {muni: data[0]},
        dataType: 'json',               
        success: function(json){
            if  (data) {                    
                myWidth =  (document.getElementById('flot_widget').offsetWidth-45)+"px";
                myHeight = (document.getElementById('flot_widget').offsetWidth*.66)+"px";
                document.getElementById('wrapper').style.display = 'block';                 
                document.getElementById('printflotcontainer').style.display = 'block';
                document.getElementById('flotcontainer').style.width = myWidth;
                document.getElementById('flotcontainer').style.height = myHeight;
                var options = {
                    series: {
                        lines: { show: true, fill: false, fillColor: "rgba(255, 255, 255, 0.8)" },
                        points: { show: true, fill: true }
                    }                       
                }; 

                $.plot("#flotcontainer", [json], options);
                myCanvas = $('#flotcontainer').find('canvas.base');       
                flotcontainercanvas = myCanvas.get(0);
                ctx3 = flotcontainercanvas.getContext('2d');
                myLocation = sURL + 'php/saveme.php';
                var cs = new CanvasSaver(myLocation)
                var btn = cs.generateButton('Save', flotcontainercanvas, 'PTS_Chart');                  
                ConvertOrSave.appendChild(btn);
            }
        }
    })
}
})

编辑：这是ConvertOrSave中唯一的元素：

<div id="ConvertOrSave" class="g2">
        <button id="convert">convert</button>
</div>

Answer 1

由于convertAndSave中只有一个其他元素，你可以通过添加转换和新按钮来避免附加重复...（如果这样做有意义）

var convert = document.getElementById('convert');
ConvertOrSave.innerHTML = convert + btn;

Answer 2

您可以在添加新按钮之前删除现有按钮：

var btn = document.getElementById('convert');
btn && btn.parentNode.removeChild(btn);

请在此处查看：http://jsfiddle.net/F3Uxa/

Answer 3

您可以删除现有按钮：

var btn = document.getElementById('convert');
if (btn != null){
   btn.remove();
}

选中 Fiddle ，这将删除现有按钮。我希望这会对你有所帮助。

使用javascript删除子元素

3 个答案: