Create a div element and give this div element a class attribute

Question

1.00/5 (2 votes)

See more:

1. Create a div element
2. Give this div element a class attribute with a value of "square"
3. append this div element using the appendChild method to the element with the id of "squares-wrapper"

2. Define a function named removeSquare.
This function should remove one element with the class of "square" from the HTML.

What I have tried:

function addSquare(){
let newdiv = document.createElement("div");
newdiv.className="square"
document.getElementsById("squares-wrapper").appendChild(newdiv);

}

function removeSquare(){
let box= getElementsByClassName("square")
box.remove()

Posted 2-May-23 1:28am

adla099

Updated 2-May-23 4:43am

Add a Solution

Comments

Dave Kreskowiak 2-May-23 8:49am

You forgot to ask a question.

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

User 15590104 · Accepted Answer · 2023-05-02T01:51:00

as mention in this article :

Element: setAttribute() method - Web APIs | MDN[^]

JavaScript

function ADD_ELM( new_tag, id_target , attr , attr_value ){

newElm = document.createElement(" + new_tag + ") ;

newElm.setAttribute( attr , attr_value ) ;

document.getElementById( id_target ).appendChild( newElm ) ;

}

ADD_ELM( "DIV" , "squares_wrapper" , "class" , "square" ) ; // function ADD using.

About "Let" statement :

'let' comes in JS with the modern JS, and is equal : 'void' myVar. this var is alive for the scope of the declaration.

let A = 2 ;
is same as :
A = 2 ;

// Once out of the scope, this var is delete.

to remove you can do shorter, with an imperative instruction :

function removeSquare(){
Document.getElementsByClassName("square")[0].remove() ; // 0 is the index because an Array of Element could be return, instead of one only 'element'.

adla099 · Accepted Answer · 2023-05-02T04:43:00

Solution 2

function addSquare(){
let wrapper=document.getElementById("squares-wrapper");
let newElm= document.createElement("div") ;
newElm.classList.add("square");
wrapper.appendChild(newElm);
}

function removeSquare(){
let erase= document.getElementsByClassName("square")[0]
erase.remove()
}

Posted 2-May-23 4:43am

adla099

Create a div element and give this div element a class attribute

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Create a div element and give this div element a class attribute

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us