jjzjj

javascript - DOM 相当于 jQuery `.detach()` ？

coder 2024-07-28 原文

我正在尝试通过单击“X 按钮”来删除输入字段。删除后，提交表单时不会发布其值。出现一个“+ 按钮”，允许用户再次添加所述输入。输入有一个打开日历的 onclick 事件，重新附加后，日历不再在点击时打开。我不会使用 jQuery。

adderBtn.onclick = function (e) {
    var elem = that.hiddenElems.shift();
    that.collectionItemContainer.append(elem);
}

removerBtn.onclick = function (e) {
    collectionItemElem.remove();
    that.hiddenElems.push(collectionItemElem);
}

问题是如何在不丢失事件的情况下移除和重新附加 DOM 节点。

最佳答案

当你删除一个元素时，只要你保留对它的引用，你就可以把它放回去。所以:

var input = /*...code to get the input element*/;
input.parentNode.removeChild(input); // Or on modern browsers: `input.remove();`

以后如果你想把它放回去

someParentElement.appendChild(input);

与 jQuery 不同，DOM 不区分“删除”和“分离”——DOM 操作始终等同于“分离”，这意味着如果您将元素添加回去，它仍然有其处理程序:

实例:

var input = document.querySelector("input[type=text]");
input.addEventListener("input", function() {
  console.log("input event: " + this.value);
});
input.focus();
var parent = input.parentNode;
document.querySelector("input[type=button]").addEventListener("click", function() {
  if (input.parentNode) {
    // Remove it
    parent.removeChild(input);
  } else {
    // Put it back
    parent.appendChild(input);
  }
});
<form>
  <div>
    Type in the input to see events from it
  </div>
  <label>
    Input:
    <input type="text">
  </label>
  <div>
    <input type="button" value="Toggle Field">
  </div>
</form>

如果您删除该元素而不保留对它的任何引用，则它有资格进行垃圾回收，附加到它的任何处理程序也是如此(前提是没有其他引用它们，并在这方面忽略一些历史性的 IE 错误......) .

关于javascript - DOM 相当于 jQuery `.detach()` ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48626203/

javascript相当inputsectioncodedom

有关javascript - DOM 相当于 jQuery `.detach()` ？的更多相关文章

  1. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  2. Python 相当于 Perl/Ruby ||= - 2

    这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:Pythonconditionalassignmentoperator对于这样一个简单的问题表示歉意，但是谷歌搜索||=并不是很有帮助；)Python中是否有与Ruby和Perl中的||=语句等效的语句？例如:foo="hey"foo||="what"#assignfooifit'sundefined#fooisstill"hey"bar||="yeah"#baris"yeah"另外，类似这样的东西的通用术语是什么？条件分配是我的第一个猜测，但Wikipediapage跟我想的不太一样。

  3. java - 什么相当于 ruby​​ 的 rack 或 python 的 Java wsgi？ - 2

    什么是ruby​​的rack或python的Java的wsgi？还有一个路由库。 最佳答案 来自Python标准PEP333:Bycontrast,althoughJavahasjustasmanywebapplicationframeworksavailable,Java's"servlet"APImakesitpossibleforapplicationswrittenwithanyJavawebapplicationframeworktoruninanywebserverthatsupportstheservletAPI.ht

  4. java - Ruby 相当于 Java 的 Collections.unmodifiableList 和 Collections.unmodifiableMap - 2

    Java的Collections.unmodifiableList和Collections.unmodifiableMap在Ruby标准API中是否有等价物？ 最佳答案 使用freeze应用程序接口(interface):Preventsfurthermodificationstoobj.ARuntimeErrorwillberaisedifmodificationisattempted.Thereisnowaytounfreezeafrozenobject.SeealsoObject#frozen?.Thismethodretur

  5. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ？ - 2

    我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

  6. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. python - Ruby 相当于 Python str[3 :] - 2

    是否有Ruby等效于Python的方法来获取在字符串末尾结束的子字符串，如str[3:]？必须输入字符串的长度并不方便。 最佳答案 传递最后一个元素=-1的范围str[3..-1] 关于python-Ruby相当于Pythonstr[3:]，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/12978768/

  8. ruby - Java 8 相当于 ruby​​ each_with_index - 2

    我想知道，是否有一些流操作可以像ruby​​中的each_with_index那样做。其中each_with_index遍历值以及值的索引。 最佳答案 没有专门用于该目的的流操作。但您可以通过多种方式模仿该功能。索引变量:以下方法适用于顺序流。int[]index={0};stream.forEach(item->System.out.printf("%s%d\n",item,index[0]++));外部迭代:以下方法适用于并行流，只要原始集合支持随机访问。Listtokens=...;IntStream.range(0,toke

  9. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  10. ruby - setInterval() 相当于 ruby - 2

    在JavaScript中你可以这样做:setInterval(func,delay);我似乎无法在谷歌上找到任何我真正要找的东西。是否有ruby等价物？提前致谢。 最佳答案 你可以做类似的事情:Thread.newdoloopdosleepdelay#yourcodehereendend或者你可以定义一个函数:#@return[Thread]returnloopthreadreferencedefset_interval(delay)Thread.newdoloopdosleepdelayyield#callpassedblocke

随机推荐