1

I have cloned one of the nodelist which contains the entire body tag contents. can you let me know how to remove the particular div named "footer" in the cloned contents., ie., from tempDocument.

var tempDocument = [nodeList][0].cloneNode(true);

Now tempDocument contains <body>......</body>
If I try to use

 tempDocument.getElementByID;

or

 nodeList][0].getElementById

I am facing below error

.getElementById is not a function

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Madhu
  • 59
  • 1
  • 7
  • `getElementById` is not a function. `getElementById(id)` is a function, where `id` is the `id` of your footer div. If your div has a `name` then use `getElementsByName(name)`. – Andrew Cheong Jan 04 '16 at 04:42
  • Check the casing for Id, document.getElementById() – shishir Jan 04 '16 at 04:43
  • yes, This is what I tried which throws error console.log(tempDocument.getElementById("footer")); Looks tempDocument contains the contents of all ... tags and not as a document object. So we cant use these functions. Is there any other way to remove a particular div named footer from this cloned contents. – Madhu Jan 04 '16 at 04:45
  • Your cloned node contains a cloned id? – MinusFour Jan 04 '16 at 04:51
  • Possible duplicate of ["Submit is not a function" error in JavaScript](http://stackoverflow.com/questions/833032/submit-is-not-a-function-error-in-javascript) –  May 05 '17 at 04:32

2 Answers2

1

cloneNode returns a node - not a document. since you appear to be wanting a pure js solution, you'll probably want to look into using children() instead...

Just to clarify my meaning here...

Lets assume you have something like the following:

<div id="container"><span "child">yo</span></div>

Using the code you're applying above, it would be equivalent to something like this:

document.getElementById( 'container' ).getElementById( 'child' )

This will throw the same fatal error - because you're trying to use a method that doesn't exist on a node. instead, you could so something like document.getElementById( 'container' ).children(... to find what you are after. there are a thousand other ways to do it as well - just so a search for "javascript find children in node" and you should be on your way with the rest

Jonathon Hibbard
  • 1,547
  • 13
  • 20
  • If I use children () and remove the particular div using XXXX.parentNode.removeChild(XXXX); then it will reflect in my original object and those div will be vanished from the screen. I want to remove it only from the cloned contents for further processing. – Madhu Jan 04 '16 at 04:54
  • you just need to treat your cloned node as the same DOM element that you cloned - because it really isn't any different. just don't forgret to append your cloned node to the dom though! hah - otherwise you won't see it – Jonathon Hibbard Jan 04 '16 at 04:58
1

As you have cloned body so its not document object

var tempDocument = document.getElementById('body').cloneNode(true);

where html is something like this

<body id="body">
    <div>
        <p>Hello</p>
    </div>
    <footer>I am footer</footer>
</body>

so you need to do tempDocument.getElementsByTagName('footer') or use tempDocument.getElementsByClassName

So to delete child say footer you need to do tempDocument.removeChild(tempDocument.getElementsByTagName('footer')[0]) it will only impact your clone node, not the original one

Raunak Kathuria
  • 3,185
  • 1
  • 18
  • 27
  • Hi Raunak This looks almost ok, but I am unable to delete it. tempDocument.removeChild(tempDocument.getElementsByClassName('Footerbutton')[0]); is throwing below error Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. This statement returns my req div.tempDocument.getElementsByClassName("Footerbutton"); But unable to delete it – Madhu Jan 04 '16 at 06:13
  • @Madhu if you are accessing using this `div.tempDocument.getElementsByClassName("Footerbutton")` then try removing this only `div.tempDocument.removeChild(tempDocument.getElementsByClassName('Footerbutton')[0])‌​`. Error states that node you are deleting is not the child element. – Raunak Kathuria Jan 04 '16 at 06:44