Problem of using class and id while removeChild from parent

Question

i saw this example and trying to understand the theory behind the html if i use class in and id in

why it doesn't work. why i cant remove the child element it gives me error

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <script>
            window.onload = function() {
    var parent = document.getElementsByClassName("demo");
    var child = document.getElementById("p1");
    parent.removeChild(child);
};

        </script>
    </head>
    <body>
        <div class="demo"> 
            <p id="p1">This is a paragraph.</p>
            <p id="p2">This is another paragraph.</p>
        </div>
    </body>
</html>

but if i index parent node it work! i want to know how it work

var parent =document.getElementById("p1");
    parent[0].removeChild(child);

code is wrong parent will be a collection, not single element. change to `var parent = document.querySelector(".demo");` — Bibberty, Mar 08 '19 at 03:00
`getElementsByClassName` returns a collection. There is not `removeChild` on the `HTMLCollection` object. — Bibberty, Mar 08 '19 at 03:04
`it gibes me error` - what error? Edit your question, show us the error. — Don't Panic, Mar 08 '19 at 03:09
so class name will be string and search all class to match string by letters and return class collection ? — daneillone, Mar 09 '19 at 03:07

score 1 · Answer 1 · answered Mar 08 '19 at 03:03

Here, corrected to select single elements.

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <script>
            window.onload = function() {
    var parent = document.querySelector(".demo");
    var child = parent.querySelector("#p1");
    parent.removeChild(child);
};

        </script>
    </head>
    <body>
        <div class="demo"> 
            <p id="p1">This is a paragraph.</p>
            <p id="p2">This is another paragraph.</p>
        </div>
    </body>
</html>

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

Access element by `className`

.getElementsByClassName() will collect All elements with the given class. A single target can be selected if you use the bracket notation and the index number of the specific element. The following example will get the first (or only) element with the given class:

var parent = document.getElementsByClassName("demo")[0];

Or

var parent = document.querySelector('.demo');

Note the syntax for the given parameter of .querySelector() method:

'.demo'                '#p1'                        'div'                             '[name=radio]'
the dot prefix     the hash prefix       if there's no prefix   this syntax denotes an
denotes a class denotes an id        it's a tagName             attribute

Demo

var parent = document.getElementsByClassName("demo")[0];

/* OR this line below */
// var parent = document.querySelector('.demo');

var child = document.getElementById("p1");

parent.removeChild(child);

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>

    </head>
    <body>
        <div class="demo"> 
            <p id="p1">This is a paragraph.</p>
            <p id="p2">This is another paragraph.</p>
        </div>
    </body>
</html>

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 08 '19 at 03:09

zer00ne

41,936
6
41
68

so class name will be string and search all class to match string by letters and return class collection ? as i given only one class but parent return class collection will it still be object array with only one class collection? – daneillone Mar 09 '19 at 03:17
`.getElementsByClassName()` will return a collection by reference of a string parameter. This array-like object is called a **HTMLCollection**. You can access a specific element of that collection with bracket notation: `var HTMLCol = document..getElementsByClassName('CLASSNAME')` 99% of the time you'll want the first element: `HTMLCol[0]`, or the 4th: `HTMLCol[3]`, or the last: `HTMLCol[HTMLCol.length -1]`, and so on. The other method: `.querySelector()` will return the first one on the page. So in short, [Continued...] – zer00ne Mar 09 '19 at 04:16
[...Continue] there are 3 types of string parameters used in DOM methods that I can think of ATM: 1. The oldest type is used by the majority of DOM methods: ex. `.getElementsByClassName()`, `.getElementById()`, `.getElementsByTagName()`, etc. The 2nd type is a `htmlString` which is a string that represents HTML markup that can be parsed into real HTML by properties like `.innerHTML` and methods like `insertAdjacentHTML()`, and the third type of string parameter (and newest) is the CSS Selector used by `.querySelector()` and `.querySelectorAll()` See answer describing CSS Selector syntax. – zer00ne Mar 09 '19 at 05:30

Problem of using class and id while removeChild from parent

2 Answers2

Access element by className

Demo

Access element by `className`