CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Gusic industry
Gusic industry

Reputation: 133

<span> Close button doesn't work

I wrote a script for closing my div, so when i click on the x the div is deleted but for some reason when i click the x the whole page is deleted. Does any know where i might have gone wrong.

HTML

 <div class="note">  
         <span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>x</span>    
    <div class="note-editable">
        <p>Hi and welcome to</p>
        <p1>Stickynote</p1>
        <p2>Go ahead and note away</p2>
    </div>        
 </div>

Upvotes: 0

Views: 1083

Answers (2)

Andrew Mairose
Andrew Mairose

Reputation: 10995

The parent of your <span> is <div class="note">, whose parent is presumably the <body>, which would have a parent of <html>. So, when you do:

this.parentNode.parentNode.parentNode

You are referencing the <html> tag, and when you remove:

this.parentNode.parentNode

you are removing the <body> from your <html>, thus removing all of your content.

Instead, to achieve your desired result, you could remove one parentNode reference in your example, like this:

this.parentNode.parentNode.removeChild(this.parentNode);

or instead just use:

this.parentNode.remove();

Upvotes: 0

Scott Schwalbe
Scott Schwalbe

Reputation: 430

It looks like you went up one level too far. Try

onclick='this.parentNode.parentNode.removeChild(this.parentNode);'

Upvotes: 4

Related Questions