Удалить элемент, если введенное текстовое значение пусто или равно нулю

Question

Я пытаюсь удалить значение, если введенный текст пустой или нулевой, вот как это выглядит

Как вы Как видите, вариант 1, 2,3 не имеет входных значений. Поэтому элементы или div должны быть удалены.

Вот мой модальный html код

<div class="modal fade-scale" id="myModal" tabindex="-1" role="dialog">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <h4 class="modal-title">Modal title</h4>
       </div>
       <div class="modal-body">
       <div class="card">
            <div class="card-header">
                <h4>Create a Multiple Choice Question</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" id="question" class="form-control"  required />
                    </div>

                    <hr>

                    <div class="input-group input-group-sm mb-3" id="divChoice1">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="inputGroup-sizing-sm">Choice 1</span>
                        </div>
                        <input type="text" class="form-control" name="choice1" id="choice1" aria-describedby="inputGroup-sizing-sm" required />
                    </div>


                    <div class="input-group input-group-sm mb-3"  id="divChoice2">
                        <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" id="choice2" aria-describedby="inputGroup-sizing-sm" required />
                    </div>

                    <div class="input-group input-group-sm mb-3"  id="divChoice3">
                        <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" id="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" id="answer" aria-describedby="inputGroup-sizing-sm" required /> 
                    </div>

                    <input type="button" id="btnSave" class="btn btn-block btn-info" value="Submit" />

                </form>
            </div>
        </div>
       </div>
       <div class="modal-footer">
         <button type="button" id="btnClose" class="btn btn-default">Close</button>
         <button type="button" id="btnSave" class="btn btn-primary">Save changes</button>
       </div>
     </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
 </div>

Вот мой код скрипта PS - Я пытался Чтобы обусловить это, если варианты выбора не имеют значений, элемент должен быть удален. В результате входной текст удаляется, но после того, как я закрываю модальное окно и редактирую другие данные, входной текст снова отображается. есть проблема с этим. любезно советуем и помогите спасибо!

//edit
$('#showdata').on('click', '.item-edit', function(){
        var id = $(this).attr('data');

        $('#myModal').modal('show');
        $('#myModal').find('.modal-title').text('Edit Question');
        $('#myForm').attr('action', '<?php echo base_url() ?>teachers/updateQuestion');
        $.ajax({
            type: 'ajax',
            method: 'get',
            url: '<?php echo base_url() ?>teachers/editQuestion',
            data: {id: id},
            async: false,
            dataType: 'json',
            success: function(data){

                $('input#question').val(data.question);
                $('input#choice1').val(data.choice1);
                $('input#choice2').val(data.choice2);
                $('input#choice3').val(data.choice3);
                $('input#answer').val(data.answer);

                if(data.choice1==null){
                    $("#divChoice1").remove();
                }

                if(data.choice2==null){
                    $("#divChoice2").remove();
                }

                if(data.choice3==null){
                    $("#divChoice3").remove();
                }

            },
            error: function(){
                alert('Could not Edit Data');
            }
        });
    });

Answer 1

Вам нужно скрыть опции вместо удаления и показывать div после каждого нажатия кнопки.

if(!data.choice1){
    $("#divChoice1").hide();
}

И использовать show в самой первой строке ajax успеха.

$("#divChoice1").show();

Answer 2

Вы можете сделать следующее в своей функции успеха:

success: function(data) {
    $('input#question').val(data.question);

    if (data.choice1 != "") {
        $('input#choice1').val(data.choice1);
        $('input#choice1').closest("div.input-group").show();
    } else {
        $('input#choice1').closest("div.input-group").hide();
    }

    if (data.choice2 != "") {
        $('input#choice2').val(data.choice2);
        $('input#choice2').closest("div.input-group").show();
    } else {
        $('input#choice2').closest("div.input-group").hide();
    }

    if (data.choice3 != "") {
        $('input#choice3').val(data.choice3);
        $('input#choice3').closest("div.input-group").show();
    } else {
        $('input#choice3').closest("div.input-group").hide();
    }

    $('input#answer').val(data.answer);
}