Доступ к дочернему узлу, созданному отдельной функцией

Question

Я новичок в js и мне интересно, как удалить дочерний узел, который был добавлен в другую функцию. Например, в приведенной ниже функции элемент p устанавливается как переменная empty, которая затем добавляется к listingEl.

var empty = document.createElement('p'); 
    empty.innerHTML = '<p><div>' + 'Drag map to populate results' + '</div></p>'; 

    empty.style.color = "#FFFFF0"; 
    empty.style.fontSize = 125 + "%"; 
    listingEl.appendChild(empty); 

Как я могу получить доступ к этому ребенку empty в другой функции для того, чтобы изменить его innerHTML, например, или удалить его полностью?

listingEl.removeChild(empty) не работает, когда выполняется в другой функции, однако, когда я создаю новый элемент и добавить его listingEl в другую функцию, которая работает. Например:

var back = document.createElement('p'); 
       back.innerHTML = '<p><div>' + 'Hit back arrow to see results' + '</div></p>'; 
       back.style.color = "#FFFFF0"; 
       back.style.fontSize = 125 + "%"; 
       listingEl.appendChild(back); 

Почему appendChild() работает, но removeChild(empty) нет?

Answer 1

Назначение идентификатора р при добавлении

, а затем, когда вы должны удалить и затем использовать,

var elem = document.getElementById("appended-p"); 
elem.parentNode.removeChild(elem); 

Если у вас есть несколько динамически р тегов, то вы можете поддерживать счетчик и выделяют уникальные идентификаторы для каждого добавленного p-тега