如何 select div 不是 jQuery 中 div 的父级或兄弟级

Question

I have many divs like this

        <div class="body-row row m-0">
            <div class="px-2 col-3">
                <select name="item_type[]" class="form-control invoiceType" required>
                    <option value="newitem">New Item</option>
                    <option value="presetitem">Present Item</option>
                    <option value="discount">Discount</option>
                    <option value="subsidy">Subsidy</option>
                </select>
            </div>
            <div class="px-2 col-6 item-description" style="display: flex;">
                <input type="text" class="form-control" name="description[]" placeholder="Add Invoice Description" required style="flex: 1">
            </div>
            <div class="px-2 col-2">
                <input type="number" class="form-control" name="amount[]" placeholder="0" required>
            </div>
            <div class="col-1 del-icon-container"><i class="fas fa-trash del-invoice-item"></i></div>
        </div>

I want to select only item-description , and remove the content in it

$(document).on('change', '.invoiceType',function() {
        var invoiceType = $(this).find(":selected").val();
        if(invoiceType == 'newitem') {
            $('.item-description').empty();
            $('.item-description').append(`
                <input type="text" class="form-control" name="description[]" placeholder="Add Invoice Description" required style="flex: 1">
            `);
        } 
    });

Currently it make changes to all divs because they have all same name of classes

Answer 1

You can use jQuery's DOM traversal methods to relate elements to each other based on a reference to an element in an event handler. In this case you can use closest() to find a common parent container, then find() to get the element you require.

Note in the example below that the :selected selector is not necessary - you can get the val() from the select directly. In addition you can combine empty() and append() by setting the html() of the element.

 $(document).on('change', '.invoiceType', function() { console.log('change'); let $field = $(this); let invoiceType = $field.val(); //:selected not needed if (invoiceType === 'newitem') { $field.closest('.body-row').find('.item-description').html(`<input type="text" class="form-control" name="description[]" placeholder="Add Invoice Description" required style="flex: 1">`); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="body-row row m-0"> <div class="px-2 col-3"> <select name="item_type[]" class="form-control invoiceType" required> <option value="newitem">New Item</option> <option value="presetitem">Present Item</option> <option value="discount">Discount</option> <option value="subsidy">Subsidy</option> </select> </div> <div class="px-2 col-6 item-description" style="display: flex;"> <input type="text" class="form-control" name="description[]" placeholder="Add Invoice Description" required style="flex: 1"> </div> <div class="px-2 col-2"> <input type="number" class="form-control" name="amount[]" placeholder="0" required> </div> <div class="col-1 del-icon-container"><i class="fas fa-trash del-invoice-item"></i></div> </div> <div class="body-row row m-0"> <div class="px-2 col-3"> <select name="item_type[]" class="form-control invoiceType" required> <option value="newitem">New Item</option> <option value="presetitem">Present Item</option> <option value="discount">Discount</option> <option value="subsidy">Subsidy</option> </select> </div> <div class="px-2 col-6 item-description" style="display: flex;"> <input type="text" class="form-control" name="description[]" placeholder="Add Invoice Description" required style="flex: 1"> </div> <div class="px-2 col-2"> <input type="number" class="form-control" name="amount[]" placeholder="0" required> </div> <div class="col-1 del-icon-container"><i class="fas fa-trash del-invoice-item"></i></div> </div>

Finally, as an aside, note that creating an entirely new input and overwriting the content of the div that contains it is a little redundant. Simply calling val('') on the input will suffice is all you need to do is clear its value:

$field.closest('.body-row').find('.item-description input').val('');