add/edit buttons

master
Matt Huntington 2 years ago
parent fa88f2050b
commit f2568a79ed

@ -15,11 +15,11 @@ for(const element of lisAndBody){
element.addEventListener('drop', (event)=>{ element.addEventListener('drop', (event)=>{
event.stopPropagation() event.stopPropagation()
event.target.classList.remove('dragging'); event.target.classList.remove('dragging');
event.target.children[1].appendChild(currentDraggedItem) event.target.children[0].appendChild(currentDraggedItem)
}) })
} }
const deleteButtons = document.querySelectorAll('button'); const deleteButtons = document.querySelectorAll('button.delete');
for (const deleteButton of deleteButtons) { for (const deleteButton of deleteButtons) {
deleteButton.addEventListener('click', (event)=>{ deleteButton.addEventListener('click', (event)=>{
event.target.parentNode.remove() event.target.parentNode.remove()

@ -7,32 +7,41 @@
<script defer src="app.js"></script> <script defer src="app.js"></script>
</head> </head>
<body> <body>
<h1>New Trello</h1>
<ul> <ul>
<li draggable="true"> <li draggable="true">
one one
<button>Delete</button>
<ul></ul> <ul></ul>
<button class="add">Add</button>
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</li> </li>
<li draggable="true"> <li draggable="true">
two two
<button>Delete</button>
<ul></ul> <ul></ul>
<button class="add">Add</button>
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</li> </li>
<li draggable="true"> <li draggable="true">
three three
<button>Delete</button>
<ul></ul> <ul></ul>
<button class="add">Add</button>
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</li> </li>
<li draggable="true"> <li draggable="true">
four four
<button>Delete</button>
<ul></ul> <ul></ul>
<button class="add">Add</button>
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</li> </li>
<li draggable="true"> <li draggable="true">
five five
<button>Delete</button>
<ul></ul> <ul></ul>
<button class="add">Add</button>
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</li> </li>
</ul> </ul>
</body> </body>

Loading…
Cancel
Save