如果div中所有输入和选择均为空，如何删除div

Question

我有很多下面的div。

<div class="plsCheck">
<input type="text"value=""/>
<input type="text"value="" />
<select>
 <option value="1" selected>1</option>
 <option value="2" selected>2</option>
 <option value="3" selected>3</option>
</select>
</div>

<div class="PlsCheck">...</div>
<div class="PlsCheck">...</div>

如果所有输入和选择都没有值，我想删除该元素。 jQuery或只是javascript都可以。 我试图看下面的帖子。 但似乎情况不一样。 检查一个div的输入项值在jQuery中不是空的

我尝试了这个，但是还不行。

$('.plsCheck').each(function(){
    var fillIn=false;
    $(this).find('select input').each(function(){if ($(this).value !='') fillIn=true;});
    if(!fillIn) $(this).remove();
}); 

最后，我尝试了下面的代码是可以的。 关键是$（this）被更改，因此我需要定义一个变量来存储$（this）; 其次，在检查div之后，需要将fillIn初始化。

var fillIn=false;
$('.item_type_group').each(function(){
    __this=$(this);
    $(this).find('select, input[type=text]').each(function(){if ($(this).val() !='') fillIn=true;});
    if(!fillIn) __this.remove();
    fillIn=false;
});      

Answer 1

如果它们没有任何价值，您是否愿意从视图中删除div及其所有内容？ 如果是这样，您需要一个函数，该函数将：

一种。 检查元素的状态； 然后b。 有条件地隐藏div。

首先，您需要提供您的元素ID，以便您可以引用它们，并为选择列表提供“选择内容”选项，例如：

<div class="plsCheck">
  <input id="txt1" type="text" value="" />
  <input id="txt2" type="text" value="" />
  <select id="sel1">
    <option>--- Select ---</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</div>

我还可以自由地对HTML进行一些小的更正。

接下来，您将需要您的功能。 我将在javascript中实现它，以便您了解发生了什么。 如果您愿意，可以随意使用第三方javascript库：

function checkDiv() {
  var div = document.getElementById('plsCheck');
  var txt1 = document.getElementById('txt1');
  var txt2 = document.getElementByid('txt2');
  var sel1 = document.getElementById('sel1');
  if(txt1.value.length < 1 && txt2.value.length < 1 && sel1.selectedIndex < 1) {
    div.style.visibility = 'hidden';
  } else {
    div.style.visibility = 'visible';
  }
}

最后，您需要考虑如何触发函数。 例如，您可以在用户从选择列表中更改选择或更改文本框中的文本时触发它，如下所示：

<input id="txt1" type="text" onchange="javascript:checkDiv();" />
<input id="txt2" type="text" onchange="javascript:checkDiv();" />
<select id="sel1" onchange="javascript:checkDiv();">

如果这样做，那么只要用户进行了满足以下条件的更改：（1）两个文本框均为空，并且（2）没有从选择列表中进行选择，则div及其内容将从屏幕上消失。

希望这可以帮助。

Answer 2

由于您尚未提供触发该行为的事件，因此我只提供完成您要查找的代码。 但是，您必须修改select元素。 因为它将始终具有以下值之一： 1 or 2 or 3 ...因此不会删除任何div。 此外，您希望有selected属性上有多个option只有当select具有multiple属性。

$('.plsCheck').filter(function() {
    return $('input,select', this).filter(function() {
        return !!this.value;
    })
    .length == 0;
})
.remove();

演示使用按钮单击作为触发器

 $(function() { $('#check').on('click', function() { $('.plsCheck').filter(function() { return $('input,select', this).filter(function() { return !!this.value; }) .length == 0; }) .remove(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="plsCheck">A <input type="text"value=""/> <input type="text"value="" /> <select> <option value="">Select</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="plsCheck">B <input type="text"value=""/> <input type="text"value="" /> <select> <option value="">Select</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="plsCheck">C <input type="text"value=""/> <input type="text"value="" /> <select> <option value="">Select</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="plsCheck">D <input type="text"value=""/> <input type="text"value="" /> <select> <option value="">Select</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <button id="check"> Check </button> </button> 

Answer 3

尝试这个：

$('.plsCheck').each(function(index, obj){
    var fillIn=false;
    $(obj).find('select input').each(function(idx, elem){if ($(elem).value !='') fillIn=true;});
    if(!fillIn) $(obj).remove();
}); 

基本上，使用$ .each回调的第二个参数来获取目标元素的句柄，

Answer 4

感谢您的所有贡献。 因为我认为我使用的解决方案略有不同。 我想在这里发布我的解决方案，或者您可以查看我的问题。

var fillIn=false;
$('.plsCheck').each(function(){
    __this=$(this);
    $(this).find('select, input[type=text]').each(function(){if ($(this).val() !='') fillIn=true;});
    if(!fillIn) __this.remove();
    fillIn=false;
});