JSFiddle - React, Tailwind, and code Playground

HTML

<input id="new_element"></input>&nbsp;<a id="new_button" href="javascript:void(0)">Add element</a>
</br>
<div id="tree"></div>

CSS

.branch {
    display: block;
    width: 400px;
}
.leaf {
    display: inline-block;
    width: 400px;
}
.title {
    float: left;
}
.button {
    float: right;
    padding-left: 10px;
}

JavaScript

function Element(title, parent, level){
		self = this
		this.title = title
		this.level = level
		this.parent = parent
		this.html = null
		this.children = {}
		this.num = 1
		this.addElement = function(self){
			return function(){
				dotOrSpace = self.level == 0 ? " " : "."
				var title = elementInput.value || self.title + dotOrSpace + self.num
				var element = new Element(title, self, self.level + 1)
				self.children[title] = element
				var html = addHtmlElement(self, element)
				element.html = html
				elementInput.value = ""
				self.num += 1
			}
		}(this)
		this.removeElement = function(self){
			return function(){
				self.html.parentNode.removeChild(self.html)
				var parent = self.parent
				self.parent = null
				delete parent.children[self.title]
			}
		}(this)
		this.editElement = function(self){
			return function(){
				var title = elementInput.value || self.title
				delete self.parent.children[self.title]
				self.title = title
				self.parent.children[self.title] = self
				self.html.children[0].innerHTML = self.title
				elementInput.value = ""
			}	
		}(this)
	}

	function addHtmlElement(parent, element){
		var div = document.createElement('div')
		div.className = element.level == 1 ? "branch" : "leaf"
		var titleSpan = document.createElement('span')
		titleSpan.style['margin-left'] = 20 * element.level + "px"
		titleSpan.style['marginLeft'] = 20 * element.level + "px"
		titleSpan.innerHTML = element.title
		var buttonSpan = document.createElement('span')
		//buttonSpan.className = "button"
		var buttonAdd = document.createElement('a')
		buttonAdd.className = "button"
		buttonAdd.onclick = element.addElement
		buttonAdd.href = "javascript:void(0)"
		buttonAdd.innerHTML = "Add"
		var buttonDelete = document.createElement('a')
		buttonDelete.className = "button"
		buttonDelete.onclick = element.removeElement
		buttonDelete.href = "javascript:void(0)"
		buttonDelete.innerHTML = "Delete"
		var buttonEdit =...