使用Javascript删除div内的文本

Posted 2023-05-07

【中文标题】使用Javascript删除div内的文本

【英文标题】：Delete text inside div using Javascript

【发布时间】：2020-09-04 05:07:18

【问题描述】：

我有一个使用 MailChimp 的电子邮件表单，我需要在 5 秒后删除 div 内的“感谢订阅”消息，但我无法选择 div 内的文本。 我尝试了 getElementById、querySelector、innerText、innerhtml，有无#，但我不断得到空值。 我还尝试了 querySelectorAll 来查看所有节点，它将 div 和 id 显示为 div#mce-error-response.responde 并且文本在 innerHTML 内

<div id="mce-responses" class="clear">
    <div class="response" id="mce-error-response" style="display:none" wfd-invisible="true"></div>
    <div class="response" id="mce-success-response" style="" wfd-invisible="true">Thank you for subscribing!</div>
</div>

let myForm = document.querySelector('#mc-embedded-subscribe-form');
let msg = document.getElementById('#mce-success-response').innerHTML;

myForm.addEventListener('submit', onSubmit);

function onSubmit(e) 
    e.preventDefault();

    console.log(msg);

MailChimp 正在单击提交后添加该 div 这是代码https://codepen.io/m4573r00/pen/GRpwdKJ

这是节点 https://ibb.co/gw0jf8J

【参考方案1】：

您尝试通过在 document.getElementById 中使用 # 来访问该元素，这是错误的。

您可以使用 SetTimeout 函数进行延迟。

setTimeout(function()
       var el = document.getElementById('mce-success-response');
       el.style.display = "none";
, 1000);

编辑

基于 cmets 的工作代码笔解决方案 - Link

【讨论】：

我试过了，但它不起作用。我得到一个空值。单击提交后，MailChimp 正在添加该 div。这是代码codepen.io/m4573r00/pen/GRpwdKJ

我更新了 JS 代码 - 在这里检查 - codepen.io/rushabh-wadkar/pen/yLYQZYw

由于 mailchimp 发送整个文档并在提交后将其加载到 iframe 中，但提交函数在它之前运行，这就是它返回未定义的原因。所以我尝试在 setTimeOut 函数中连接元素，如果 5 秒后出现，基本上会删除元素

【参考方案2】：

let msg = document.getElementById('mce-success-response').innerHTML;

不要使用# 或. 作为document.getElementById() 的输入参数MDN

【讨论】：

我试过了，但它不起作用。我得到一个空值。单击提交后，MailChimp 正在添加该 div。这是代码codepen.io/m4573r00/pen/GRpwdKJ

【参考方案3】：

let myForm = document.querySelector('#mc-embedded-subscribe-form');
let msg = document.getElementById('mce-success-response').innerHTML;

myForm.addEventListener('submit', onSubmit);

function onSubmit(e) 
    e.preventDefault();

    console.log(msg);

你需要删除getElementById('mce-success-response')中的#

【讨论】：

我试过了，但它不起作用。我得到一个空值。单击提交后，MailChimp 正在添加该 div。这是代码codepen.io/m4573r00/pen/GRpwdKJ