Почему remove() и removeChild() не работают

#javascript #dom

#javascript #dom

Вопрос:

Ну, я не совсем понимаю, это функции или поток моей программы. Я запрашиваю простой API для практики, который извлекает долготу и широту ISS.Я хотел делать это каждую секунду, вот почему я использовал setInterval() . Теперь я хочу, чтобы при поступлении следующих данных текущие автоматически удалялись / исчезали и отображались только те, которые отображаются, поэтому я попытался использовать remove () и removeChild(), но они не удаляют элемент, и новые данные продолжают появляться один под другим. Вот javascript:

 const url = "https://api.wheretheiss.at/v1/satellites/25544";
const box = document.getElementById('div');

function setup(){
    let request = new XMLHttpRequest();
    request.onload = gotData;
    request.open('GET',url);
    request.send();
}
setInterval(setup,1000);
function gotData(){
  data = JSON.parse(this.responseText);

  const box_lat = document.createElement('H2');
  const box_long = document.createElement('H2');
  box_lat.innerText = "Latitude:  "   data.latitude;
  box_long.innerText = "Longitude:  "   data.longitude;

  document.body.appendChild(box);
  if(box.hasChildNodes()){
    box.removeChild(box_lat);
    box.removeChild(box_long);
  }else{
    box.appendChild(box_lat);
    box.appendChild(box_long);
  }
}
  

Это выдает следующую ошибку:—

 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at XMLHttpRequest.gotData (http://127.0.0.1:3000/Projects/CSS_JS/JavaScript/iss.js:30:9)
  

Я также пытался использовать box.childNodes.length > 0 в if условии, но все равно получил тот же результат.

Использование document.body.removeChild(box) для удаления элемента complete box никогда не показывает этот элемент div!

Все, что я хочу, это чтобы данные обновлялись автоматически без повторения!

Комментарии:

1. In box.removeChild(box_lat) box_lat ссылается на элемент, который вы только что создали ( const box_lat = document.createElement('H2'); ) . Этот элемент еще не был добавлен как дочерний. Если вы хотите обратиться к box текущим дочерним элементам, вы можете выполнить итерацию box.children .

Ответ №1:

 box.removeChild(box_lat);
  

Вы пытаетесь удалить box_lat из box .

 const box_lat = document.createElement('H2');
  

но вы только что создали box_lat несколько строк раньше и нигде не добавили их.


Похоже, вы пытаетесь получить доступ к box_lat переменной из предыдущего вызова функции … но это другая переменная с другим значением, и у вас нет к ней доступа здесь.


Вам нужно найти элементы, которые вы действительно хотите удалить, например:

 box.querySelector("h2").remove()