javascript - 如果表单中的任何输入或选择为空，如何删除表行？

Question

我有一个如下所示的表单，如果输入文本和选择选项为空，我希望删除 tr 行。如果任何输入不为空，则显示表格行

如您所见，输入不为空，它正在删除整行，可以检查两者都不为空然后删除

通过使用 Jquery

注意:表格行是动态添加的

$(function(){
$("table#my_form tr td").each(function(){
  $(this).find('input, select').each(function(){
      if($(this).val()==""){
        $(this).closest('tr.table_row').remove();
      }
  })
})
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="">

<table id="my_form">
    <tr class="table_row">
       <td>
            <input type="text" name="company" value="TCS" />
        </td>
        <td>
        	<select name="favorites" id="favorites">
        		<option value="">Select Favorites</option>
        		<option value="chess">Chess</option>
        		<option value="caroms" selected>Caroms</option>
        		<option value="ruby">Ruby</option>
        	</select>
        </td>
    </tr>
        <tr class="table_row">
       <td>
            <input type="text" name="company" value="Deloite" />
        </td>
        <td>
        	<select name="favorites" id="favorites">
        		<option value="">Select Favorites</option>
        		<option value="chess">Chess</option>
        		<option value="caroms">Caroms</option>
        		<option value="ruby">Ruby</option>
        	</select>
        </td>
    </tr>

    <tr class="table_row">
       <td>
            <input type="text" name="company" value="GOOGLE" />
        </td>
        <td>
        	<select name="favorites" id="favorites">
        		<option value="">Select Favorites</option>
        		<option value="chess" selected>Chess</option>
        		<option value="caroms">Caroms</option>
        		<option value="ruby">Ruby</option>
        	</select>
        </td>
    </tr>
</table>
</form>

Answer 1

要检查所有输入，您可以尝试这样的操作。正如您提到的，您正在动态添加行，因此您希望其他一些事件处理程序再次检查更多坏行。此代码将在页面加载时运行一次，然后在单击 '#removeBadRows' 按钮时再次运行。

$(function () {
    removeBadRows();

    $(document).on('click', '#removeBadRows', function () {
        removeBadRows();
    });
});

function removeBadRows() {
    $("table#my_form tr").each(function () {
        var badCount = 0;
        var inputLength = $(this).find('input, select').length;
        $(this).find('input, select').each(function () {
            if ($(this).val() == "") {
                badCount++;
            }
        });
        if (badCount == inputLength) {
            $(this).remove();
        }
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="">

    <table id="my_form">
        <tr class="table_row">
            <td>
                <input type="text" name="company" value="test" />
            </td>
            <td>
                <select name="favorites" id="favorites">
                    <option value="">Select Favorites</option>
                    <option value="chess">Chess</option>
                    <option value="caroms" selected>Caroms</option>
                    <option value="ruby">Ruby</option>
                </select>
            </td>
        </tr>
        <tr class="table_row">
            <td>
                <input type="text" name="company" value="" />
            </td>
            <td>
                <select name="favorites" id="favorites">
                    <option value="" selected>Select Favorites</option>
                    <option value="chess">Chess</option>
                    <option value="caroms">Caroms</option>
                    <option value="ruby">Ruby</option>
                </select>
            </td>
        </tr>
        <tr class="table_row">
            <td>
                <input type="text" name="company" value="GOOGLE" />
            </td>
            <td>
                <select name="favorites" id="favorites">
                    <option value="">Select Favorites</option>
                    <option value="chess">Chess</option>
                    <option value="caroms">Caroms</option>
                    <option value="ruby" selected>Ruby</option>
                </select>
            </td>
        </tr>
    </table>
</form>