Кнопка переименования элемента списка.

[Setraiser]

Всем Добрый День.

Я новичок в изучении JavaScript. Работаю над простым модулем, если его можно назвать таковым, простой ToDoList (Список дел). Он сам работает прекрасно, но я хочу сделать кнопку переименования элемента списка. Но проблема заключается в том, что в элементе списка (li), помимо его названия, лежат ещё две кнопки: ода кнопка для переименования, другая для удаления (<li>text<button>Edit</button><span>X</span></li>). И если например делать переименование элемента через prompt, то оно, конечно, переименует его, но при этом сотрет ещё и теги внутри (кнопки). Я решил попробовать сделать переименование при помощи регулярных выражений и использовать replace (string.replace(/[^<>/]/, prompt) - это просто наглядный пример, как примерно я думал делать переименование. Здесь проблема заключается в том, что при нажатии на кнопку prompt для переименования вылетает, но при нажатии OK, он ничего не переименовывает, при это, не выдает никакую ошибку.

list.addEventListener('click', function(ev) {
  if(ev.target.tagName === "BUTTON") {
    var li = document.querySelector('li');
    var regRename = /[^<>/]/ig;
       
     //var a = prompt('Переименование элемента');
     li.textContent.replace(regRename, prompt());
     
     if(reg.test(li.textContent) === false) return false;
    
  }
}, false);

[рони]

Setraiser,
https://javascript.ru/forum/misc/455...tml#post302151

[Setraiser]

А есть что нибудь именно на нативном JS? JQ пока не сильно пользовался, хочу пока реализовать пока без него.

Но исходя из предложенного вами, если я правильно понял, то там имеется ввиду запускать событие преобразования ячейки таблицы (в принципе не важно что именно, можно и мой элемент списка) в input, где можно будет изменять текст через его value (менять значение).

Но у меня еще возник вопрос. В таком случае в value не будут находится кнопки?

p.s. прошу понять и простить, если где то могу тупить

[рони]

В таком случае в value не будут находится кнопки?

не будут

[рони]

А есть что нибудь именно на нативном JS?

https://javascript.ru/forum/dom-wind...tml#post302977

[j0hnik]

<ul contenteditable="true">
	<li>задача 1</li>
	<li>задача 2</li>
	<li>задача 3</li>
</ul>

[j0hnik]

<li>Пункт1</li>
<li>Пункт2</li>
<li>Пункт3</li>
<input type="checkbox"> Редактирование
<script>
document.querySelector("input").onchange = e => document.querySelectorAll("li").forEach(el=>el.contentEditable = e.target.checked ? true : false);
</script>

[Setraiser]

Спасибо) Получилось) Но хотелось бы ещё узнать, когда нужно уже подтвердить изменение, т.е. вернуть обратно в элемент списка ли (input превратить в li обратно), то это можно сделать обратный replaceChild? Или как то можно использовать toggle, например нажав на кнопку Edit, включается редактирование элемента списка в виде input, и второй раз нажать, оно возвращается обратно.

[рони]

например нажав на кнопку Edit, включается редактирование элемента списка в виде input, и второй раз нажать, оно возвращается обратно.

и в чём проблема?

[Setraiser]

Я пробовал делать подтверждение изменения текста в строке через событие keyup. Но у меня возникала ошибка, когда я делал replaceChild.

var input = document.createElement('input');
input.className = 'data';
input.value = div.firstChild.data;
div.replaceChild(input, div.firstChild);

// div - родительский элемент кнопки, где была нажата кнопка, т.е. <li>, где меняется текст.
Потом пробовал сделать при нажатии enter наоборот.

div.firstChild.data = input.value;
input.replaceChild(div, input.firstChild);

Т.е. назначается значение li с input.value, потом делаем replaceChild, меняем input на li (Родительский). По сути вроде так, но он ругается на то, что input не узел. У меня тут пробел в том, что я не знаю, как вернуть обратно, ведь по сути, то же самое, но оно выходит, воспринимает это по другому. Как вернуть input обратно на li?
И делать это, например, через тот самый toggle - нажал кнопку и div.firstChild.data превращается в input.value, другой раз нажал, и input.value превращается в div.firstChild.data.