jQuery изменить только текст, но не влияет на элемент в диапазоне

Question

В laravel проекте, блейд-файл. У меня есть следующая строка.

 <td><span id="date"> {{ $data->p_date}}<input type="text" class="datepic" id="custom_datepicker{{$payment->p_id}}"  data-multiselect = "{{count(explode(',', $data->p_date))}}" name="book_date[]"  placeholder="MONTH/DAY/YEAR" value="{{$data->p_date}}" style="display: flex; float: right;"/></span></td>

Как видите, в боковом элементе есть текст span, а также есть элемент. Я хочу только изменить текст, но не изменить блок. когда я использовал это $("#date").text(''), все это удалено, включая элемент. Я хочу только удалить текст, когда я нажимаю кнопку. Пожалуйста, дайте мне предложение. Спасибо

Answer 1

вы заключаете элемент ввода в тэг span, попробуйте что-то вроде этого

<td><span id="date"> {{ $data->p_date}}</span><input type="text" class="datepic" id="custom_datepicker{{$payment->p_id}}"  data-multiselect = "{{count(explode(',', $data->p_date))}}" name="book_date[]"  placeholder="MONTH/DAY/YEAR" value="{{$data->p_date}}" style="display: flex; float: right;"/></td>

, затем попробуйте

$("#date").text('')

Answer 2

Не знаю, почему вы не сделали бы это прямо со стороны сервера.

Если вы просто хотите сохранить один элемент (или элементы ввода), используйте `. html ( ) метод вроде так:

$('#date').html(function() {
    return $(this).find('input');
});

$('#date').html(function() {
    return $(this).find('input');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="date">whatever text<input type="text" class="datepic" style="display: flex; float: right;"/>Or other text here<anotherElement>Retain this too</anotherElement></span>

Чтобы просто удалить текстовые узлы и сохранить все остальное, объедините метод .html() с .filter() метод так:

$('#date').html(function() {
    return $(this).contents().filter(function() {
        return this.nodeType !== 3;
    });
});

$('#date').html(function() {
    return $(this).contents().filter(function() {
        return this.nodeType !== 3;
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="date">whatever text<input type="text" class="datepic" style="display: flex; float: right;"/>Or other text here<anotherElement>Retain this too</anotherElement></span>

Answer 3

Я считаю, что нет никакого собственного способа сделать это, один обходной путь - это.

        var span = $('#date');
        var input = span.find('input');
        span.text('New Text');
        span.append(input);