как отрисовать простое дерево с помощью js jquery и записать его в бд используя php?

Question

Нужно отрисовать в браузере на одной странице простое дерево, которое изначально имеет одну кнопку при нажатии на которую появляется корень дерева. у корня есть имя и две кнопки добавить и удалить узел(+,-), у последующих новых узлов должны быть такие же кнопки. При добавлении узла, новый узел появляется справа ниже, при удалении узла удаляется он с его дочерними элементами. Все эти изменения так же должны фиксироваться в базе данных. Как я понял с помощью jQuery нужно создать список и в каждый последующий элемент <li> вкладывать новый элемент. Но на начальном этапе столкнулся с проблемой, что не могу добавить новый элемент в дочерний тег <li>. Вот пример кода: index.php

<body class="my-2 mx-3">
<button id="create-root" class="btn btn-success">Create root</button>
<div id="tree"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/tree.js"></script>
</body>

main.js

$(document).ready(function () {
let root = "<ul style='list-style-type: none;'>" +
    "<li class='add'><button class='btn btn-success'>+</button><button class='btn btn-danger'>-</button>" +
    "</li></ul>";
$("#create-root").click(function () {
    $("#tree").append(root);
    $("#create-root").remove();
});
$('.add').on('click', function () {
    $(this).parent().append(root);
});

}); Подскажите где я ошибся или может моя логика не совсем верна.

Answer 1

// $('.add').on('click', function () {
$('#tree').on('click', '.add', function () {
  $(this).parent().append(root);
});

$(document).ready(function() {
  let root = "<ul style='list-style-type: none;'>" +
    "<li class='add'><button class='btn btn-success'>+</button><button class='btn btn-danger'>-</button>" +
    "</li></ul>";
  $("#create-root").click(function() {
    $("#tree").append(root);
    $("#create-root").remove();
  });

  $('#tree').on('click', '.add .btn-success', function () {
    $(this).closest('li').append(root);
  });
  $('#tree').on('click', '.add .btn-danger', function () {
    $(this).closest('li').remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button id="create-root" class="btn btn-success">Create root</button>
<div id="tree"></div>

Answer 2

Окончательный вариант получился такой:

$(document).ready(function () {
let root = "<ul style='list-style-type: none;'>" +
    "<li><button class='delete btn btn-danger'>-</button> <button class='add btn btn-success'>+</button>" +
    "</li></ul>";
$("#create-root").click(function () {
    $("#tree").append(root);
    $("#create-root").remove();
});
$('#tree').on('click', '.add', function () {
    $(this).closest('li').append(root);
});
$('#tree').on('click', '.delete', function () {
    $(this).closest('li').remove();
});
});

БЛОГ НА HUSL

как отрисовать простое дерево с помощью js jquery и записать его в бд используя php?

Ответы (2 шт):