browsing through nodes_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-15 07:58 出处：网络

this is what an html structure of the webpage looks like: <body> <form> <input type=\'file\'/>

相关专题：dom javascript

this is what an html structure of the webpage looks like:

<body>
<form>
 <input type='file'/>
</form>

<div id='list'>
 <div>value here<input id='delete' type='button'/></div>
</div>
</body>

i have found javascript code that triggers on 'delete' button click and removes input 'file' element. it uses this piece of code where element is input 'file' mentioned above:

deleteButton.onclick=function(){this.parentNode.element.parentNode.removeChild(  
this.parentNode.element );}

i am trying to understand logic(rules) behind 'this.parentNode.element' ? why not accessing element directly 'element.parentNode.remove...'

many thanks开发者_StackOverflow中文版

i am trying to understand logic(rules) behind 'this.parentNode.element' ?

There's no element property on the Node, Element, HTMLElement, or HTMLDivElement interfaces. So my guess would be that elsewhere in that code, you'll find something that's explicitly adding that property to the element instance of the div containing the button. You can do that, add arbitrary properties to element instances. These are frequently called "expando" properties and should be done very, very, very carefully.

Not the answer to the question, just opinion. It's better avoid constructions like

this.parentNode.element.parentNode

Because in case when you change your DOM structure, you will need rewrite you JS. So I think it's better to give id attributes to tags, and use next construction to get DOM element:

document.getElementById('element_id')

or if you will use some js framework (like jQuery) you can use even easier construction to get DOM element

$("#ement_id")

Ok, "removeChild" is a strange method, and quite probably, ill-conceived. It should look like:

<div>value here<input id='deleteMe' type='button'/></div>

var node = document.getElementById('deleteMe');
node.remove(); // <--- does not exist, but sure would be nice!!!

No, instead we have to do these shenanigans:

var node = document.getElementById('deleteMe');
node.parentNode.removeChild(node); // verbose! Convoluted!

We have to get the node's parent, call the method, then refer to the node again. This doesn't look like any other DOM methods as far as I recall. The good news is you can make it happen all in one line, chained, like a jQuery method.

You are best served to start over or copy somebody else's code. The use of "this" means it was within an object (or class), referring to other methods or properties within that object. You should stick to non-object variables and functions for now.

Hope that helps.