如果值为空，有没有办法删除输入元素？答案

【问题标题】：Is there a way to remove input elements if the value is null?如果值为空，有没有办法删除输入元素？
【发布时间】：2020-06-21 09:39:29
【问题描述】：

我的输入元素有问题，它有一个空值。我可以删除输入元素吗？有什么办法吗？谢谢。这是问题的图片

我可以删除那个带有空值的输入文本吗？

我正在使用 js 和 ajax 在我的数据库中调用这些值。这是我的脚本文件

showAllQuestions();

//function to get data
function showAllQuestions(){
    $.ajax({
        type: 'ajax',
        url: '<?php echo base_url() ?>teachers/showQuestions',
        async: false,
        dataType: 'json',
        success: function(data){
            var html = '';
            var i;
        for(i=0; i<data.length; i++){
            html +='<div class="card">'+
                        '<div class="card-header">'+
                            '<h4>Multiple Choice</h4>'+
                            '</div>'+
                            '<div class="card-body">'+
                                '<form>'+
                                    '<div class="input-group">'+
                                    '<div class="input-group-prepend">'+
                                            '<span class="input-group-text">Question</span>'+
                                        '</div>'+
                                        '<input type="text" name="question" value="'+data[i].question+'" class="form-control" required>'+
                                    '</div>'+
                                    '<hr>'+
                                    '<div class="input-group input-group-sm mb-3">'+
                                        '<div class="input-group-prepend">'+
                                            '<span class="input-group-text" id="inputGroup-sizing-sm">Choice 1</span>'+
                                        '</div>'+
                                        '<input type="text" class="form-control" value="'+data[i].choice1+'" name="choice1" aria-describedby="inputGroup-sizing-sm" required>'+
                                    '</div>'+
                                    '<div class="input-group input-group-sm mb-3">'+
                                        '<div class="input-group-prepend">'+
                                            '<span class="input-group-text" id="inputGroup-sizing-sm">Choice 2</span>'+
                                        '</div>'+
                                        '<input type="text" class="form-control" name="choice2" value="'+data[i].choice2+'" aria-describedby="inputGroup-sizing-sm" required>'+
                                    '</div>'+
                                    '<div class="input-group input-group-sm mb-3">'+
                                        '<div class="input-group-prepend">'+
                                            '<span class="input-group-text" id="inputGroup-sizing-sm">Choice 3</span>'+
                                        '</div>'+
                                        '<input type="text" class="form-control" name="choice3" value="'+data[i].choice3+'" aria-describedby="inputGroup-sizing-sm" required>'+
                                    '</div>'+
                                    '<div class="input-group input-group-sm mb-3">'+
                                        '<div class="input-group-prepend">'+
                                            '<span class="input-group-text" id="inputGroup-sizing-sm">Answer Choice</span>'+
                                        '</div>'+
                                        '<input type="text" class="form-control" name="answer" value="'+data[i].answer+'" aria-describedby="inputGroup-sizing-sm" required>'+
                                    '</div>'+
                                '</form>'+
                            '</div>'+
                        '</div>';
                }

                $('#showdata').html(html);
            },
            error: function(){
                alert('Could not get Data from Database');
            }
        });
}

为了展示，我把它放在一个 div 标签上

<div id="showdata"></div>

【问题讨论】：

查看模板文字，然后为输入的字符串元素设置条件
@EugenSunic - 请帮我解决代码的逻辑问题，是否有任何功能不好创建或执行？仍然理解它的部分。
<input> 元素不能有 null 值。该值始终是一个字符串。
你必须测试每一个选择，以确保你只放出你想要放出的东西
很简单。只需检查if(!data[i].choice1)，然后只添加Choice 1 input-group input-group-sm mb-3 父div 并对choice2 和choice3 执行相同操作。

标签： javascript jquery arrays ajax

【解决方案1】：

添加null 检查将变量添加到字符串的位置。 null 是 falsy 值，如果变量是 null，则您将有一个空值：

'<input type="text" class="form-control" value="'+(data[i].choice1 ? data[i].choice1 : "")+'" name="choice1" aria-describedby="inputGroup-sizing-sm" required>'

【讨论】：

请注意，这也会删除数字值0。如果这是一个有效值，您应该只替换null 和undefined。例如。 (data[i].choice1 == null ? data[i].choice1 : "")
@Anurag Srivastava - 你好，空值已被删除，但 input element 仍然存在。它没有被删除。我预计question text input and answer text input 只会显示。
虽然没有任何选择的问题没有任何意义。
@palaѕн - 嗨，答案是answer input element or choice 4 我正在制作后端流程，教师可以在其中创建问题。
查看@palaѕн 对您的问题的评论。通常，您需要将 html 的构建分解为多个部分，并有条件地添加 html。