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

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" ><div ><div ><span ></span> <span ></span><div ></div></div><h2 >Good job!</h2><div >'   message   '</div><div ><button onclick="ok()"  id="btn-alert">'   btn   '</button></div></div></div></div>')
}

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

<button  id="btn">OK</button>

    <!-- <div id="content" >
        <div >
        <div >
            <span ></span> 
            <span ></span>
            <div ></div>
        </div>
        <h2 >Good job!</h2>
        <div >is ok.</div>
        <div >
        <button  id="btn-alert">OK</button>
        </div>
        </div>
    </div>  -->

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

CodePudding user response：

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" >
        <div >
          <div >
            <span ></span> 
            <span ></span>
            <div ></div>
          </div>
          <h2 >Good job!</h2>
          <div >${message}</div>
          <div >
            <button  id="btn-alert">${btnTxt}</button>
          </div>
        </div>
      </div>
    </div>`);
}

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

CodePudding user response：

var btn;
var btn_alert;
var content;
var div1;

function message(message, btn) {
  document.write('<div id="div1"><div id="content" ><div   ><div ><span ></span> <span ></span><div ></div></div><h2 >Good job!</h2><div >'   message   '</div><div ><button onclick="ok()"  id="btn-alert">'   btn   '</button></div></div></div></div>');

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

You assigned your variables before creating any HTML. When the functions looked for their respective parameters on your document, they couldn't find anything.

Explained :

getElementById() will execute on a blank page and therefore it will not set a value you can use.