如果输入值为空，则删除父 div，如果输入值不为空，则显示父 div？答案

【问题标题】：remove parent div if the input value is empty and show parent div if the input value is not empty?如果输入值为空，则删除父 div，如果输入值不为空，则显示父 div？
【发布时间】：2014-03-19 13:04:07
【问题描述】：

如果输入值为空，我正在尝试删除父 div，如果输入值不为空，则显示父 div？

输入字段的值是动态的，这意味着它的值是另一个输入字段的值，我使用 javascript 执行此操作。

到目前为止，由于某种原因，我无法显示/隐藏父 div。我怀疑原因是因为输入字段的值是动态的，这意味着用户没有在该输入字段中输入任何内容。他们正在输入另一个输入字段，并且动态输入字段的值会相应更新。

这是我到目前为止显示/隐藏父 div 的内容：

HTML：

<div id="BOTTEXT2" class="secTxt">
<input type="text" class="sect2" id="sect2" style="border:none; background:none; " value="" size="12"  readonly="readonly"/>
</div>

JAVASCRIPT：

<script type="text/javascript">
if(document.getElementById("sect2").value == ""){
document.getElementById("BOTTEXT2").style.display="block";
}
</script>

有人可以帮我解决这个问题吗？

【问题讨论】：

每次更新值时都必须运行那段代码
我在上面的代码中只能看到一个输入字段，另一个更新该字段的输入字段在哪里？
@mystic，因为这是我需要根据其值删除父 div 的 div。

标签： javascript

【解决方案1】：

将您的代码包装在事件处理程序中：

window.onload = function() {
    var input = document.getElementById('sect2');
    input.addEventListener('change', function() {
        document.getElementById('BOTTEXT2').style.display = (input.value ? 'block' : 'none');
    }, false);
};

这样，每当您更新输入时，div 状态都会相应更改。

【讨论】：

这没有任何作用。对不起。

【解决方案2】：

我不知道它是否适合您，但请遵循解决方案。
我从主 div 中创建了另一种输入类型来模拟这种情况。
我使用了 jQuery。之后，您可以按照自己的方式设置 css。

HTML

<div id="BOTTEXT2" class="secTxt">
    <input type="text" class="sect2" id="sect2" style="border:none; background:none; " value="BSAU145D" size="12"  readonly="readonly"/>            
</div>
<input type="text" id="sect1">

Javascript (jQuery)

$(document).ready(function(){
    $('#sect1').keyup(function(){
        if($('#sect1').val() == 'test') {
            $('#BOTTEXT2').css({'display':'none'});
        } else {
            $('#BOTTEXT2').css({'display':'block'});
        }
    });
});

Here is the fiddle

【讨论】：