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();
});

ただし、再作成する必要がある機能は、実際には、このテキストボックスのデータをサイトでアクセスできないようにすると同時に、テキストボックス自体を非表示にすることです。これはその機能を提供しません。

現在の例

score 2 · Accepted Answer

どうぞ: 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);
    }
});

score 2 · Accepted Answer

その TextBox を削除しないように表示および非表示にする必要があります。

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

実施例

score 0 · Accepted Answer

あなたは正しい方法でそれをやっていますが、テキストボックスから値を削除する必要がある小さなことが1つ欠けています。

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

また

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

そして、これはテキストエリアの正しい方法 (表示/非表示) です。

score 0 · Accepted Answer

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

JSFiddle

javascript - DOM での削除と追加

4 に答える 4

Related

Reference