Динамическая работа со списком в jQuery

Question

Динамическая работа со списком в jQuery

Рейтинг: 0Ответов: 1Опубликовано: 04.08.2023

Есть текстовое поле и кнопка, при нажатии на которую формируется <li>, в котором должен быть checkbox, text (тот, что ввели) и кнопка Del. При клике на checkbox - нужно делать операции с текстом - изм. цвет, толщину и т.п. Кнопка Del должна удалять весь <li> целиком. Основная проблема у меня - это доступ к этим внутренним элементам в <li>:

$("#btnAdd").on('click', (e) => {  
    let check = document.createElement('input')
    check.type = 'checkbox'        
    check.style.width = 15 + 'px'
    check.style.height = 15 + 'px'

    $( "input:checkbox" ).on("change", function(e) {
        if ($(this).is(':checked'))                      
            input_text.style.color = 'red'        
        else             
            input_text.style.color = 'black'        
    });    

    let input_text = document.createElement('input')
    input_text.type = 'text'
    input_text.value = $("#input_todo").val()    
    
    let btn_del = document.createElement('input')
    btn_del.type = 'button'
    btn_del.value = 'Del'    
    btn_del.onclick = () => {

    }

    let li = document.createElement('li');    
    let newLi = $(li).append(check).append(input_text).append(btn_del) 

    $("#ul_list").append(newLi);
    $("#input_todo").val('')    
})

Проблема в том, что при создании нескольких элементов <li>, при отметке чекбокса - стили применяются не в этом <li>, а во всех, что идут ниже. То же самое - если убираю check. По удалению целого <li> при нажатии Del пробовал разные варианты - ничего не получилось. Буду признателен за помощь!

javascript jquery

Источник: Stack Overflow на русском

Answer 1

▲ 1

Зачем подключать библиотеку и не использовать её в полной мере? Думаю, что сто́ит лучше изучить документацию и примеры.

$('#btnAdd').on('click', (e) => {
  let check = $('<input>')
    .attr({'type': 'checkbox'})
    .css({'width': '15px', 'height': '15px'})
    .on('change', function() {
      if ($(this).is(':checked')) input_text.css({'color': 'red'});
      else input_text.css({'color': 'black'});
    });
  let input_text = $('<input>')
    .attr({'type': 'text'})
    .val($("#input_todo").val());
  let btn_del = $('<input>')
    .attr({'type': 'button'})
    .val('Del')
    .on("click", function() {
      $(this).closest('li').remove();
    });
  let newLi = $('<li>').append(check).append(input_text).append(btn_del);
  $("#ul_list").append(newLi);
  $("#input_todo").val('');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="input_todo"><button id="btnAdd">ADD</button>
<ul id="ul_list"></ul>

Динамическая работа со списком в jQuery

Ответы