Как выровнять элементы блока?

Yurii Korniienko, верно

Как выровнять элементы блока?

Zorroti, нет, не Ваш, это заготовка которая была изначально что бы показать что я хочу реализовать

Мне нужно что бы оно осталось на тех же местах, но центральные инпуты один под другим ровно были
Если использовать Ваш код, то текст будет над инпутами и третий инпут не во втором ряду

Как выровнять элементы блока?

Спасибо, но это немного не то, что необходимо
Нужно что бы при этом текст был слева прижат к элементам, а не снизу
Вот есть заготовка - https://codepen.io/ANTON_ZIN_/pen/NWjZdww
Там видно что инпуты не один над другим, как бы их лучше выровнять?

Как выровнять элементы блока?

Это немного не то, что необходимо
Нужно что бы при этом текст был слева прижат к элементам
Вот пример - https://codepen.io/ANTON_ZIN_/pen/NWjZdww
Там видно что инпуты не один над другим, вот я и задал вопросы, как бы их лучше выровнять

Как выровнять элементы блока?

Pavel-ww, вопрос стоит немного не так, возможно не так выразился
Нужно что бы при этом текст был слева прижат к элементам
Вот пример - https://codepen.io/ANTON_ZIN_/pen/NWjZdww
Там видно что инпуты не один над другим, вот я и задал вопросы, как бы их лучше выровнять

Как переделать массив объектов?

Пашенька, согласен, не верно выразился

Как убрать наложение границ у блоков?

Хорошая идея, только если будет к примеру 5 блоков в ряду, тоесть неизвестное кол-во блоков всего, оно поплывет вероятно)

Как ставить курсор в конкретное место?

hzzzzl, тут я думаю не критично)
А вообще попробую сейчас реализовать отлавливание Enter, и просто делать тоже самое что и при клике вне области, отключать редактирование.

Как ставить курсор в конкретное место?

Спасибо, то что нужно!

Как лучше очистить старые события?

Kovalsky, Действительно, про переменную глупый вопрос получился))
Спасибо за помощь, вроде разобрался с этим и все работает как нужно, буду дальше копаться!)

Как лучше очистить старые события?

Kovalsky, Значит нужно сделать 2 вещи
1) Вынести обработчик клика по кнопке вне обработчика вывода контекстного меню.
2) В обработчике вывода контекстного меню сохранять в переменную элемент по которому мы кликнули.

Тогда вопрос, а как нам выводить эту переменную в обработчике клика по контекстному меню, если переменная вне функции будет не доступна?

Как лучше очистить старые события?

Kovalsky,

contextMenu.addEventListener('click', function(e) {
    if(e.target.parentNode.classList.contains('rename-btn')) {  
      console.log(`Rename element ${e.target.tagName}`);
    } else if(e.target.parentNode.classList.contains('delete-btn')) {
      console.log(`Delete element ${e.target.tagName}`);
    }
});

Добавил проверку на кнопку по наличии класса(delete/rename), обработчик одинаковый, но действия разные, но event то разный, поэтому и выводит тег контекстного меню, и опять же так как и раньше(чем больше ты вызываешь тем больше раз выводит тег)

Я обновил вариант на codepen, можете глянуть

Как лучше очистить старые события?

Kovalsky, Попробовал 2 варианта.
Первый - вынес обработчик клика по кнопке за функцию и заменил кнопку удаления на контекстное меню(добавил для функции свое событие), в таком случае выводит в консоль тег элемента В контекстном меню.

contextMenu.addEventListener('click', function(e) {
    console.log(e.target.tagName);
});

Второй вариант оставить там же обработчик и заменить кнопку на все контекстное меню, но ничего не меняется.

contextMenu.addEventListener('click', function() {
    console.log(e.target.tagName);
});

Как лучше очистить старые события?

Kovalsky, каждая из кнопок должна исполнять различные действия, поэтому и обработчики у них разные должны быть. Просто хочу сначала с этой проблемой разораться, а потом уже дальше двигаться.

Как лучше очистить старые события?

Kovalsky, Я добавил несколько элементов в HTML структуру. Суть задачи заключается в следующем, при нажатии на "Delete" выводить в консоль тег на котором я вызывал контекстное меню, тоесть это может быть как список, так и блок, так и картинка(любой элемент внутри белого квадрата). Если я вынесу deleteBtn.addEventListener за пределы function onContextMenu(e) и присвою ивент, то выводить будет тег контекстного меню, а не тег элемента по которому кликал ПКМ

Как лучше очистить старые события?

Kovalsky, А как мне иначе получить текущий элемент e в событии deleteBtn.addEventListener если оно будет лежать вне function onContextMenu(e)?

Как лучше очистить старые события?

В таком случае у меня не будет возможности достучатся до элемента по которому производился клик что бы вывести его тег, так как в этом блоке может содержаться любой другой элемент, параграф, картинка. Мы же при клике выводим e.target.tagName

Как реализовать круговой эффект метала?

Я видел подобное решение, в таком случае будет градиент с центра, а на фото в центре по сути градиента и нету, как такое можно достичь?

Как убрать эту надпись?

zorca, PIX Photography

С чем это связано и как это исправить?

Рустам Байназаров, а как-то исправить можно?