在DOM中删除和追加

Removing and Appending in the DOM

本文关键字：追加 删除 DOM      更新时间：2023-09-26

我处理这个问题已经有一段时间了，似乎无法解决。我有一个复选框，选中后会删除包含文本框的div。如果取消选中该复选框，则上述文本框应返回页面。删除有效，但附加无效。

这就是我目前正在使用的代码：

$('#ResultsNoData1').click(function () {
    var parent = document.getElementById('Results1').parentNode;
    var child = document.getElementById('Results1');
    if (this.checked) {
        parent.removeChild(child);
    }
    else {
        parent.appendChild(child);
    }
});

我最初的设计是通过以下操作完成的：

$('#ResultsNoData1').click(function () {
    (this.checked) ? $('.results1').hide() : $('.results1').show();
});

然而，我需要重新创建的功能实际上是删除该文本框中的数据，使其无法在网站上访问，同时隐藏文本框本身。这并不提供该功能。

当前示例

开始：http://jsfiddle.net/cx96g/5/

你的问题是，你试图在点击中设置父项，但一旦删除子项，就会失败。

var parent = document.getElementById('Results1').parentNode;
var child = document.getElementById('Results1');
$('#ResultsNoData1').click(function () {
    if (this.checked) {
        node = parent.removeChild(child);
    }
    else {
        parent.appendChild(child);
    }
});

您需要显示和隐藏未删除的TextBox。

$('#ResultsNoData1').click(function () {    
    if (this.checked) {
        $("#Results1").hide();
    }
    else {
        $("#Results1").show();
    }
});

工作示例

$('#ResultsNoData1').click(function () {
    (this.checked) ? $('#Results1').val('').parent().hide() : $('#Results1').parent().show();
    (this.checked) ? $('.results1casual').hide() : $('.results1casual').show();
});

JSFiddle

您做得很好，但缺少一件需要从文本框中删除值的小事。

$('#ResultsNoData1').click(function () {
    (this.checked) ? $('.results1').hide() : $('.results1').show().val("");
});

或

$('#ResultsNoData1').click(function () {
    (this.checked) ? $('.results1').hide().val("") : $('.results1').show();
});

这是显示/隐藏文本区域的正确方式。

相关文章：