为什么当我用 javascript 创建多个 html 标签时，我不能用相同的 javascript 删除它？

Question

当我用write()命令创建了一个表单，然后我想删除它，但是我不能。这个问题的原因是什么？
为了正确执行此操作，我应该使用什么命令或者我应该在我的代码中更改什么？

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 真的过时了。在您的脚本中，您将元素写入文档在您试图检索它们之后。那不行。

这是一个使用 insertAdjacentHTML 创建消息元素的示例代码段，该消息元素带有用于删除它的按钮。

处理按钮点击一般是not a good idea to use inline event handlers. The snippet uses event delegation。

首先详细了解 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>

为什么当我用 javascript 创建多个 html 标签时，我不能用相同的 javascript 删除它？

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

html

javascript

css

alert

sweetalert