Удалить дочерний элемент с помощью javascript

У меня есть вызов AJAX, который предоставляет данные для генерации графика jQuery. Каждый раз, когда запускается этот вызов AJAX, появляются новые данные JSON, и график автоматически обновляется.Удалить дочерний элемент с помощью javascript

В дополнение к построению данных 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); 
      } 
     } 
    }) 
} 
})

EDIT: Вот единственный элемент в ConvertOrSave:

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

источник

2013-10-10 DanielAttard

что такое имя класса 'btn'? –

Можете ли вы удалить добавление кнопки из обратного вызова успеха и поместить его в другое место (например, onload?)? –

@JayHarris нет имени класса для 'btn'. Он создается только с приведенным здесь кодом. – DanielAttard

С convertAndSave только один другой элемент в ней, вы можете избежать добавления дубликатов, просто добавив преобразования и новая кнопка ... (если это имеет смысл)

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

источник

2013-10-10 04:44:59

Вы можете удалить существующую кнопку перед добавлением нового с:

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

Посмотри здесь: http://jsfiddle.net/F3Uxa/

источник

2013-10-10 04:49:19

Извините @wilmoore, но этот код не работает для меня. – DanielAttard

Вы можете удалить существующую кнопку:

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

Проверить это Fiddle это удалит существующую кнопку. Надеюсь, это поможет вам.

источник

2013-10-10 04:53:49 super

Удалить дочерний элемент с помощью javascript

ответ

Смежные вопросы