如何移除值为null的input元素？附JS+AJAX实现代码

没问题，这个需求很常见，咱们可以在渲染HTML之前就做判断，只生成有有效值的选项输入框，这样比渲染完再删除更高效。下面是具体的实现方案：

核心思路 #

在循环生成每个问题的HTML片段时，对每个选项（choice1、choice2、choice3）进行null检查：只有当对应的值不为null时，才将整个选项的input-group块添加到HTML字符串中。这样就不会生成值为null的input元素了。

修改后的完整代码 #

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>';

 // 条件生成Choice 1
 if (data[i].choice1 !== null) {
  html += '<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>';
 }

 // 条件生成Choice 2
 if (data[i].choice2 !== null) {
  html += '<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>';
 }

 // 条件生成Choice 3
 if (data[i].choice3 !== null) {
  html += '<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>';
 }

 html += '<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');
 }
 });
}

备选方案：渲染后移除（不推荐，仅作补充） #

如果因为某些原因无法在渲染前判断，也可以在HTML渲染完成后，通过jQuery找到值为"null"的input元素，然后移除它们所在的整个选项容器：

// 在渲染完成后添加这段代码（比如放在$('#showdata').html(html);之后）
$('#showdata input[value="null"]').closest('.input-group').remove();

注意：这个方法的前提是后端返回的null被渲染成了字符串"null"（你的代码里value="'+data[i].choice1+'"会把null转成字符串"null"），如果后端返回的是空值，需要调整选择器为$('#showdata input[value=""]')。

内容的提问来源于stack exchange，提问作者user11907948