Question

My goals are threefold:

1. load terms.php, a page of links (glossary terms), dynamically into index.php’s div.sidepanel using AJAX. the glossary terms (links) are housed as a list in div.glossary in the loaded terms.php.

2. load span.definition1, into div.glossary, next to the glossary term it defines, again with AJAX. span.definition1 is a php string that is generated when the first glossary term in clicked.

3. load span.definition2 into div.glossary, next to the glossary term it defines, and simultaneously, remove span.definition1 when the link that loads definition2 is clicked.

I have succeeded in each of these three goals up to the point of removing the previously loaded definition when a new glossary term is clicked. Is there a tutorial that explains how this is done? I have provided a short excerpt from terms.php that can be loaded with a click of the Glossary link on my site at http://postmaterial.org/index.php.

Answer 1

Not sure without the code. But you should be able to use element.removeChild(child); where element is the parent element and child is the node that you want to delete. So:

<div id="parent">
   <span id="word1">Word (click me)</span>
   <span id="definition1">I am a definition, I should be deleted when necessary</span>
</div>

<script type="text/javascript">
function removedefinition() {
   var parent = document.getElementById('parent');
   var child = document.getElementById('definition1');
   parent.removeChild(child);
 }
 </script>

https://developer.mozilla.org/en-US/docs/DOM/Node.removeChild