Cuando creo un formulario con el comando escribir (), quiero eliminarlo, pero no puedo. ¿Cuál es la causa de este problema?
Para hacer esto correctamente, ¿qué comando debo usar o qué debo cambiar en mi código?
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>document.write está realmente desactualizado. En su secuencia de comandos, escribe los elementos en el documento después de intentar recuperarlos. Eso no funcionará.
Aquí hay un fragmento de código de ejemplo que usa insertAdjacentHTML para crear un elemento de mensaje con un botón para eliminarlo.
Por lo general , no es una buena idea usar controladores de eventos en línea. El fragmento utiliza la delegación de eventos para controlar los clics de botón.
Puede ser conveniente aprender primero más sobre la manipulación de documentos html o 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>