Magento 2 gives store owners the power to deliver the best experience for customers in all aspects. It's easy to customize the frontend to attract and engage users. In this article, We will show one of the basic customizations for Magento 2 developers: Remove the block, container, and static resource.

1. How to remove a block

A block is a unit of page output that renders some distinctive content (anything visually tangible for the end-user), such as a piece of information or a user interface element.

Steps to Remove Block From Layout in Magento 2:

Your code will be like this:

<referenceBlock <em>name</em>="product.info.overview" <em>remove</em>="true"/>

For example, remove the description block form the product page:

In catalog_product_view.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <body>
       <referenceBlock name="product.info.overview" remove="true"/>
   </body>
</page>

In this, I used <referenceBlock> to remove the block.

Name is the name of the block which you want to remove.

Remove is set to true to remove. After flushing cache, the whole description will get removed from the product page.

2. How to remove a container

A container renders child elements during view output generation. It can be empty or it can contain an arbitrary set of <container> and <block> elements. If the <container> is empty, and there is no child <block> available, it will not be displayed in the frontend source code.

Steps to Remove Container From Layout in Magento 2:

Your code will be like this: 

<referenceContainer name="content" remove="true"/>

For example, remove the content form the product page:

In catalog_product_view.xml

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <body>
       <referenceContainer name="content" remove="true"/>
   </body>
</page>

Other than removing the block, I used <referenceContainer> to remove the container.

Name is the name of the container which I want to delete.

Remove is set to true to remove. After flushing cache, the content will get removed from the product page.

3. How to remove Static resource (JavaScript, CSS, fonts)

To remove the static resources, linked in a page <head>, make a change similar to the following in a theme extending app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default_head_blocks.xml: 

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <head>
       <!-- Remove local resources -->
       <remove src="css/styles-m.css" />
       <remove src="my-js.js"/>
       <remove src="Magento_Catalog::js/compare.js" />
       <!-- Remove external resources -->
       <remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"/>
       <remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"/>
       <remove src="http://fonts.googleapis.com/css?family=Montserrat" />
   </head>
</page>

Note, that if a static asset is added with a module path (for example Magento_Catalog::js/sample.js) in the initial layout, you need to specify the module path as well when removing the asset.

READ MORE. How to add custom CSS file in Magento 2? - Magenest Blog

Happy coding!