How to remove HTML elements using HTML editor

Overview

One of the main benefits of KurocoEdge is that you can make changes to HTML tags 'on the Edge' without altering your site's source code – or even making changes to any content in the CMS you may be using.

This tutorial explains how to easily remove HTML elements using KurocoEdge's built-in HTML editor functionality.

What You'll Learn

You can remove HTML elements in KurocoEdge by following the steps below:

• Select an HTML Element to remove
• Create a rule to remove an HTML element
• Confirm that the HTML element has been removed

Select an HTML Element to remove

Before you begin setting up the new rule in KurocoEdge, we will need to know which HTML element(s) on the site to remove. To do this, you will need to identify the CSS selector of that element.

In this exercise, let's remove the "Free delivery for Christmas" element on https://astro-shopify-diverta.vercel.app/.

tip

To learn more about CSS selectors, visit this link at MDN

info

While it is possible to target multiple elements using the same CSS selector(s), this can more complicated to keep track of. For the sake of simplicity in this tutorial we will target a single element with a unique CSS selector class.

Get the CSS selector by opening your site in the web browser, right-click on the page and click [View page source]. This will display the HTML source code of your page. Within the HTML tags on the page you will see any inline CSS selectors, such ids or classes:

We will need to modify the element body > div shown in the screenshot above. Copy the CSS selector as we will be using this value in KurocoEdge later.

tip

You can also open the Developer Tools and right-click on the target element -> [Copy] -> [Copy selector] to copy the CSS selector.

Create a rule to remove an HTML element

Go back to the KurocoEdge admin panel, select an existing draft deployment and click the [+Add] button in the 'Rules list' section to create a new rule.

Select the "Response" tab, then click the [Add Action] button.

Expand the "Execution" section, then click the [Add Field] button.

This will display the 'Execution' section's options for this action. In the select/dropdown element, select the [HTML Edit] option, then click on the [Edit] button to the right.

]

A modal popup window will appear.

Configure the settings as follows:

Field	Settings
CSS Selector	body > div
Hide/Delete	Delete

Close the window once you have finished configuring the settings. A summary of the settings will be displayed for the field.

Finally, click the [Update] button at the bottom left of the page to save the changes.

Confirm that the HTML element has been removed

To confirm that the HTML element has been removed as intended, click on the [Preview] button at the top-right of the KurocoEdge admin panel to open up a preview of your site in a new tab in your broswer.

If the rule was set up correctly, you will be able to verify that the element has been removed and is no longer visible on the page.

However, to confirm that the element has actually been removed from the DOM, right-click on the page and and click on [View Page Source] to view the page's source code. Search for the div tag and verify that it has been removed from the page.

tip

If you selected to Hide the element in the HTML editor, then an inline style attribute style="display: none" will be set on the target element. This means that the element will no longer be visible on the page, but will still be present in the DOM.

Summary

We have verified that the selected HTML elements can be deleted using KurocoEdge without making changes to the server source code or CMS content during this process.

Using the HTML editor functionality, you can easily customise the look and functionality of your website and have the changes take effect without changing the source code or content. Take advantage of KurocoEdge's flexibility and useful features to customise and optimise your website.

This concludes the tutorial on removing HTML elements using KurocoEdge.