javascript - 在 DOM 中删除和追加

Question

我一直在这个问题上一段时间了，我似乎无法弄清楚。我有一个复选框，选中后会删除一个包含文本框的 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();
});

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

当前示例

Answer 1

给你：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);
    }
});

Answer 2

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

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

工作示例

Answer 3

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

JSFiddle

Answer 4

您正在以正确的方式进行操作，但缺少一件小事需要从文本框中删除值。

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

或者

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

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