Why when I create several html tags with javascript then I can not delete it with the same javascript?

Question

When I create a form with the write () command, then I want to delete it, but I can't. What is the cause of this problem?
In order to do this correctly, what command should I use or what should I change in my code?

var btn = document.querySelector('#btn');
var btn_alert = document.querySelector('#btn-alert');
var content = document.querySelector('.popup-container');
var div1 = document.getElementById('div1');

function message(message, btn) {
    document.write('<div id="div1"><div id="content" class="popup-container"><div class="box-item"><div class="icon-success"><span class="span1"></span> <span class="span2"></span><div class="ring"></div></div><h2 class="alert-title">Good job!</h2><div class="alert-content">' + message + '</div><div class="actions-btn"><button onclick="ok()" class="btn-alert" id="btn-alert">' + btn + '</button></div></div></div></div>')
}

function ok() {
    div1.removeChild(content);
}

<button class="btn-alert" id="btn">OK</button>

    <!-- <div id="content" class="popup-container dis-active">
        <div class="box-item">
        <div class="icon-success">
            <span class="span1"></span> 
            <span class="span2"></span>
            <div class="ring"></div>
        </div>
        <h2 class="alert-title">Good job!</h2>
        <div class="alert-content">is ok.</div>
        <div class="actions-btn">
        <button class="btn-alert" id="btn-alert">OK</button>
        </div>
        </div>
    </div>  -->

    
    <script src="script.js"></script>
    <script>
        message("خوش اومدی!", "کلیک کن");
    </script>

Answer 1

document.write is really outdated. In your script you write the elements to the document after you're trying to retrieve them. That won't work.

Here is an example snippet using insertAdjacentHTML to create a message element with a button to remove it.

It is generally not a good idea to use inline event handlers. The snippet uses event delegation to handle button clicks.

It may be wise to first learn more about html document manipulation or javascript.

document.addEventListener(`click`, handle);
const create = () => message(`خوش اومدی!`,`کلیک کن`);

create();

function handle(evt) {
  if (evt.target.id === `btn-alert`) {
    document.getElementById('div1').remove();
  }
  if (evt.target.id === `recreate`) {
    create();
  }
}

function message(message, btnTxt) {
  document.body.insertAdjacentHTML(`beforeEnd`, `
    <div id="div1">
      <div id="content" class="popup-container">
        <div class="box-item">
          <div class="icon-success">
            <span class="span1"></span> 
            <span class="span2"></span>
            <div class="ring"></div>
          </div>
          <h2 class="alert-title">Good job!</h2>
          <div class="alert-content">${message}</div>
          <div class="actions-btn">
            <button class="btn-alert" id="btn-alert">${btnTxt}</button>
          </div>
        </div>
      </div>
    </div>`);
}

<button id="recreate">(re)create message</button>