Function to display an alert
Explanation:

It's true that using objects can become messy after a while. That's why Template Literals and innerHTML are so powerful in this situation.

I would highly advise to avoid using parentNode when attempting to remove HTML, you may unintentionally remove something in the future if you decide to make your alert HTML more complex.

To solve this, create a container element that is accessible by your onclose method.

Also, I would also advise to not overwrite existing objects. Why not name alert to something else?

Don't add onclick events directly in the HTML, it's messy. 

Solution:

function message(text) {

  const container = document.createElement("div");

  const onClose = ()=&gt;container.remove();

  container.innerHTML = `
   &lt;div class="shadow"&gt;
      &lt;div class="alert-text"&gt;
        &lt;i id="close-alert" class="material-icons"&gt;close&lt;/i&gt;
        ${text}
      &lt;/div&gt;
   &lt;/div&gt;
  `;

  document.body.appendChild(container);

  document
    .querySelector('i#close-alert')
    .addEventListener("click", onClose);
}


Working Example:



function message(text) {

  const container = document.createElement("div");

  const onClose = ()=&gt;container.remove();

  container.innerHTML = `
   &lt;div class="shadow"&gt;
      &lt;div class="alert-text"&gt;
        &lt;i id="close-alert" class="material-icons"&gt;close&lt;/i&gt;
        ${text}
      &lt;/div&gt;
   &lt;/div&gt;
  `;
  
  document.body.appendChild(container);
  
  document
    .querySelector('i#close-alert')
    .addEventListener("click", onClose);
}

const button = document.querySelector('button');
button.addEventListener('click', function() {
  message('Button clicked');
});
* {
  box-sizing: border-box;
}

.shadow {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 98;
}

.alert-text {
  border: 1px solid #aaa;
  padding: 2.5em;
  min-height: 10%;
  width: auto;
  max-width: 80%;
  background: #fff;
  z-index: 99;
  position: relative;
  text-align: center;
}

.alert-text i {
  position: absolute;
  top: 0;
  right: 0;
  color: #777;
  cursor: pointer;
  padding: .5rem;
}

.alert-text i:hover {
  color: #444
}
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;title&gt;&lt;/title&gt;

  &lt;link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons"&gt;

&lt;/head&gt;

&lt;body&gt;

  &lt;h3&gt;Page content&lt;/h3&gt;
  &lt;button&gt;alert&lt;/button&gt;


&lt;/body&gt;

&lt;/html&gt;