DEV Community: Undefined

How to empty the DOM element in JavaScript?

Undefined — Tue, 13 Jul 2021 17:26:39 +0000

We can remove the children of the DOM element in 4 ways:

Removing all children
Setting innerHTML to empty string
Setting textContent to empty string
Using replaceChildren method

1. Removing all children

The remove method of the Element can be used to remove an element from the DOM. Using this, we can loop through all the child elements of the parent.

Consider we have a ul with 4 li child

// HTML
<ul id="parent">
  <li> list 1 </li>
  <li> list 2 </li>
  <li> list 3 </li>
  <li> list 4 </li>
</ul>

In JavaScript, remove all the child until parent have no child

// js

function empty(element) {
  while(element.firstElementChild) {
     element.firstElementChild.remove();
  }
}

let parent = document.getElementById("parent");
empty(parent);

The element.firstElementChild will return the first child of the parent. We will remove the firstElementChild of the parent as long as the parent has a child.

2. Setting `innerHTML` to empty String

By setting an empty string as innerHTML, we can remove all the children of an Element. When we set a value to innerHTML, JavaScript will parse the value using HTMLParser and replace the HTML content as parsed values -- this may cause performance issues.

function empty(element) {
   element.innerHTML = ""; 
}

let parent = document.getElementById("parent");
empty(parent);

3. Setting `textContent` to empty String

By setting an empty string as textContent, we can remove all the children of an Element. When we set a value to textContent, JavaScript will replace all children of the element with a #text node. This method is considered faster than innerHTML.

function empty(element) {
   element.textContent = ""; 
}

let parent = document.getElementById("parent");
empty(parent);

4. Using `replaceChildren` method

The replaceChildren method replaces the children of a node with a specified new set of children. If we don't send an argument, this method will remove all the children of the node in which it was called.

function empty(element) {
   element.replaceChildren(); 
}

let parent = document.getElementById("parent");
empty(parent);

Consider Supporting me here

Add new columns to table in PostgreSQL

Undefined — Sun, 14 Jun 2020 10:57:21 +0000

Adding columns

We can combine ALTER TABLE & ADD COLUMN to add new columns to an existing table.

ALTER TABLE table_name
ADD COLUMN  column_name1 data_type,
ADD COLUMN  column_name1 data_type,
Constraints;

Let's say we have a table user , with name and age , Now we need to add a new column phone_number.

alter table user
add column phone_number bigint;

Adding multiple columns

Consider we need to add two more columns, salary and nickname

ALTER TABLE user
ADD COLUMN salary int,
ADD COLUMN nickname varchar;

Add Column if not present

With Postgres 9.6 this can be done using the option if not exists

ALTER TABLE table_name
ADD COLUMN IF NOT EXISTS column_name data_type;

Adding with constraints

ALTER TABLE table_name
ADD COLUMN column_name datatype
constraints;

Let's say we need to add a default value to a column.

Alter table user
add column isAlive boolean default true;

To add a not null constraint you need to set default value because, When you add new column PostgreSQL takes the NULL as column value for the existing row, which violates the NOT NULL constraint.

Alter table user
add column isAlive boolean not null default true;

If you don't want the default value

Add a column with the default value constraint

Alter table user
add column isAlive boolean not null default true;
Then remove the default value constraint

Then remove the default value constraint

ALTER TABLE user
ALTER COLUMN isAlive
DROP DEFAULT;

Thanks for reading.

Use full spread operation in JavaScript

Undefined — Sat, 23 May 2020 14:32:51 +0000

Learn more 5 examples here

Invite to join as a writer in JavaScript Dots

Undefined — Sun, 01 Dec 2019 08:08:53 +0000

Hello developers and bloggers,
I am happy to announce that, We have created a publication "JavaScript Dots" in medium. We are inviting everyone to join as writer in our publication , who are interested in writing articles related to Javascript.

Join your hand with us , to make a better place for JavaScript developers.

Submit your story here : https://medium.com/javascript-dots/become-a-writer-in-javascript-dots-18b975e1f506

Thanks 😊 🙏 .