Why delete operator operator does not delete properties of NodeList class?

Question

In the below code,

<form action="javascript:void(0)" method="GET" enctype="multipart/form-data">
            <fieldset>
                <legend>Details</legend>
                Enter the name: <input id="name" name="name" type="text" size="30"
                                onblur="isTheValueValid(this, document.getElementById('name_help'));">  
                <span id="name_help"></span>
                <br>
            </fieldset> 
        </form>

<script type="text/javascript">
            function deleteAllChildren(spanElementObject){
                if(spanElementObject != null){
                        var nodeList = spanElementObject.childNodes;
                        [].forEach.call(nodeList,function(property){
                            delete property;
                        }); 
                }
            }
            function editSpanElementText(regex, inputElementValue, spanElementObject, helpMessage){
                deleteAllChildren(spanElementObject);
                if(!regex.test(inputElementValue)){
                    spanElementObject.appendChild(document.createTextNode(helpMessage));
                    return false;
                }else{
                    return true;    
                }
            }
            function isTheValueValid(inputElementObject, spanElementObject){
                return editSpanElementText(
                                    /^[\u0041-\u005A\u0061-\u007A\.\' \-]{2,15}\s?[\u0041-\u005A\u0061-\u007A\.\' \-]{0,15}\s?[\u0041-\u005A\u0061-\u007A\.\' \-]{2,15}$/, 
                                    inputElementObject.value, 
                                    spanElementObject, 
                                    'Please enter a valid name.');      
            }
        </script>

For the first try, on losing focus on input element, error message, Please enter a valid name. gets rendered on giving wrong input value.

For the second try, on losing focus on input element, error message Please enter a valid name. does not get removed on giving correct input value.

On debugging forEach does not delete the #text childnode.

Why delete does not delete the properties?

You are looking for https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove or even simpler https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild — Bergi, Dec 21 '15 at 11:42
@Bergi Now `removeChild` is not what am looking for. I am trying to understand why `delete` does not work. Am not comfortable for this question being duplicate. am reading your reference on `delete`. it is a very long article — overexchange, Dec 21 '15 at 11:52
`delete` does not work because it is just wrong, on so many levels. Read the article I linked in my first comment. — Bergi, Dec 21 '15 at 11:56
@Bergi To understand, why `delete` does not work? am reading that article. I may require 2-3 hours for this. It is a very long article. Obviously, you have made my job more difficult. I used `removeChild` many times before — overexchange, Dec 21 '15 at 11:57
OK, I'll write up an answer, but you still should read the article — Bergi, Dec 21 '15 at 11:59

score 1 · Accepted Answer · edited May 23 '17 at 12:30

1

Why does delete not remove the child elements?

You've made two big mistakes here:

Applying delete on a variable. The delete operator deletes properties from objects, you didn't give it one (and naming that variable "property" doesn't change anything). Read http://perfectionkills.com/understanding-delete/.
Expecting that deleting properties from a NodeList would change the DOM. Apart from them probably being non-deletable, that's not how the DOM works, only changing properties of the JS objects is not enough. You need to use the DOM API, in this case removeChild. See also Remove all child elements of a DOM node in JavaScript for what you actually wanted to do.

edited May 23 '17 at 12:30

Community

1
1

answered Dec 21 '15 at 12:04

Bergi

630,263
148
957
1,375

OK. *either Activation object (for Function code), or Global object (for Global code), these properties are created with DontDelete attribute.* So, the `property` that was passed to the callback in the above code had `DontDelete` attribute? How do I verify that attribute value using code? – overexchange Dec 22 '15 at 01:18
Yes, that's what it says. Variables cannot be deleted (except in some edge cases) – Bergi Dec 22 '15 at 01:32
You can verify by trying to delete it and receiving `false` or an exception. – Bergi Dec 22 '15 at 01:33

Why delete operator operator does not delete properties of NodeList class?

1 Answers1