How can I add a desired feature to my personal list using Javascript?

Question

As you can see below I have a very simple list which let user add and remove items as well as change the order using 3 buttons for each item.

The feature which wanna add is removing up button for first item and down button for last item. At the begging, you may feel it works fine but in fact I've only used 4 lines code to remove up and down from current list but the problem comes when the user change the order of items, add or remove them. I'm sure you guys have intelligently ways to add this but I personally have below idea and unfortunately I can't get it to work. I've spent more than 2 hour to fix it but still it doesn't work.

My idea:

FIRST PART : Making below functions for removing up button from 2nd li and re-add it to 1st li. Also, removing down button from n-1th li and re-add to nth li.

function upButtonFixer (li1,li2){

var up = document.createElement("BUTTON");
up.className = "up"
up.textContent="up"
li1.appendChild(up); 

var upper = li2.getElementsByClassName('up')[0];
li2.removeChild(upper);
}


 function downButtonFixer (li1,li2){

 var down = document.createElement("BUTTON");
 down.className = "down"
 down.textContent="down" 
 li2.appendChild(down);

 var downer = li1.getElementsByClassName('down')[0];
 li1.removeChild(downer);
 }

SECOND PART : Then I called both function into a if statement like below:

ul.addEventListener('click',(event)=>{

if (event.target.tagName == "BUTTON"){
        if (event.target.className=="up"){

            **if (prevLi == ul.firstElementChild)
                  upAdderRemover(prevLi,li);**     
          }

        if (event.target.className=="down"){

               **if (li==ul.lastElementChild) 
                   downAdderRemover(li,nextLi);**


          } 
            }

const listDiv = document.querySelector("div");
const inputDescription = document.querySelector("input.description");
const pDescription = document.querySelector('p.description');
const buttonDescription = document.querySelector('button.description');
const addItemList = document.querySelector('button.adder');
const addInput = document.getElementsByClassName('addInput')[0];
const ul = document.querySelector('ul');
const removeButton = document.querySelector('button.remover');
const lis = ul.children;


function addButtons (li){

    let up = document.createElement("BUTTON");
    up.className = "up"
    up.textContent="up"
    li.appendChild(up);
    
    let down = document.createElement("BUTTON");
    down.className = "down"
    down.textContent="down"
    li.appendChild(down);
    
    let remove = document.createElement("BUTTON");
    remove.className = "remove"
    remove.textContent="remove"
    li.appendChild(remove);
}

for (var i = 0 ; i<lis.length ;i++){
    
    addButtons(lis[i]);
}

buttonDescription.addEventListener('click', ()=>{
   pDescription.textContent = inputDescription.value+':';
});  


addItemList.addEventListener('click',()=>{
    
    let newLI = document.createElement("li"); 
    newLI.textContent = addInput.value;
    addButtons(newLI)
    ul.appendChild(newLI);
    addInput.value = '';
});


removeButton.addEventListener('click', ()=>{
    
    const lastChild = document.querySelector('li:last-child');
    ul.removeChild(lastChild);
    
});



ul.addEventListener('click',(event)=>{
        
    if (event.target.tagName == "BUTTON"){
       if (event.target.className=="remove"){
       const par1 = event.target.parentNode;
       const par2 = par1.parentNode;
       par2.removeChild(par1);
   }
       if (event.target.className=="up"){
        
            const li = event.target.parentNode;
            const prevLi = li.previousElementSibling;
            if (prevLi)
                ul.insertBefore(li,prevLi);
       }
        
        else if (event.target.className=="down"){
           
            const li = event.target.parentNode;
            const nextLi = li.nextElementSibling;
            if (nextLi)
                ul.insertBefore(nextLi,li);                    

   }
   }
});

  var first = ul.firstElementChild;
  var last = ul.lastElementChild;
  var u = first.getElementsByClassName("up")[0];
  var d = last.getElementsByClassName("down")[0];
  first.removeChild(u);
  last.removeChild(d);

@import 'https://fonts.googleapis.com/css?family=Lato:400,700';

body {
  color: #484848;
  font-family: 'Lato', sans-serif;
  padding: .45em 2.65em 3em;
  line-height: 1.5;
}
h1 {
  margin-bottom: 0;
}
h1 + p {
  font-size: 1.08em;
  color: #637a91;
  margin-top: .5em;
  margin-bottom: 2.65em;
  padding-bottom: 1.325em;
  border-bottom: 1px dotted;
}
ul {
  padding-left: 0;
  list-style: none;
}
li {
  padding: .45em .5em;
  margin-bottom: .35em;
  display: flex;
  align-items: center;
}
input,
button {
  font-size: .85em;
  padding: .65em 1em;
  border-radius: .3em;
  outline: 0;
}
input {
  border: 1px solid #dcdcdc;
  margin-right: 1em;
}
div {
  margin-top: 2.8em;
  padding: 1.5em 0 .5em;
  border-top: 1px dotted #637a91;
}
p.description,
p:nth-of-type(2) {
  font-weight: bold;
}
/* Buttons */
button {
  color: white;
  background: #508abc;
  border: solid 1px;
  border-color: rgba(0, 0, 0, .1);
  cursor: pointer;
}
button + button {
  margin-left: .5em;
}
p + button {
  background: #52bab3;
}
.list button + button {
  background: #768da3;
}
.list li button + button {
  background: #508abc;
}
li button:first-child {
  margin-left: auto;
  background: #52bab3;
}
.list li button:last-child {
  background: #768da3;
}
li button {
  font-size: .75em;
  padding: .5em .65em;
}

<!DOCTYPE html>
<html>
    
    
    
    <head>
        
        <title>My First Website</title>
        <link rel="stylesheet" href="style.css">

    </head>
    
    
    <body>
    
        <h2>Im the H2!</h2>
        <p>Im the p!</p>        
        <div class="list">
            <p class="description">The title of the list</p>
            <input type="text" class="description">
            <button class="description">change the title!</button>
            <ul>
                <li>first </li>
                <li>second</li>
                <li>third</li>
                <li>forth</li>
                <li>fifth</li>
                <li>sixth</li>
                <li>seventh</li>
                
            </ul>
            <input type="text" class="addInput">
            <button class="adder">Add!</button>
            <button class="remover">Remove!</button>
        </div>
        
        
        
            <script src="app.js"></script>
    </body>
    
    
    
    
</html>

Answer 1

I found the solution after 4 hours. It's not optimized but I've finally implemented using javascript! So happy :)

Thanks for your CSS solutions. Please check it out.

Here we go!

const toggleList = document.getElementById('toggle');
const listDiv = document.querySelector("div");
const inputDescription = document.querySelector("input.description");
const pDescription = document.querySelector('p.description');
const buttonDescription = document.querySelector('button.description');
const addItemList = document.querySelector('button.adder');
const addInput = document.getElementsByClassName('addInput')[0];
const ul = document.querySelector('ul');
const removeButton = document.querySelector('button.remover');
const lis = ul.children;


function addButtons (li){

    let up = document.createElement("BUTTON");
    up.className = "up"
    up.textContent="up"
    li.appendChild(up);
    
    let down = document.createElement("BUTTON");
    down.className = "down"
    down.textContent="down"
    li.appendChild(down);
    
    let remove = document.createElement("BUTTON");
    remove.className = "remove"
    remove.textContent="remove"
    li.appendChild(remove);
}

for (var i = 0 ; i<lis.length ;i++){
    
    addButtons(lis[i]);
}

function addup (li){
    
    
    let up = document.createElement("BUTTON");
    up.className = "up"
    up.textContent="up"
    li.appendChild(up);
    
}

buttonDescription.addEventListener('click', ()=>{
   pDescription.textContent = inputDescription.value+':';
});  


addItemList.addEventListener('click',()=>{
    
    let newLI = document.createElement("li"); 
    newLI.textContent = addInput.value;
    addButtons(newLI)
    ul.appendChild(newLI);
    addInput.value = '';
});


removeButton.addEventListener('click', ()=>{
    
    const lastChild = document.querySelector('li:last-child');
    ul.removeChild(lastChild);
    
});

function remove3Buttons(li){
    
    let x = li.firstElementChild;
    let y = li.lastElementChild;
    li.removeChild(x);
    li.removeChild(y);
}




//ul.addEventListener('mouseover', (event)=>{
//    
//    
//    if (event.target.tagName=="LI"){   
//
//        event.target.textContent=event.target.textContent.toUpperCase();
//    }    
//});
//

//ul.addEventListener('click', (event)=>{
//    
//    
//    if (event.target.tagName=="LI"){   
//        const par  = event.target.parentNode;
//        par.removeChild(event.target);
//    }    
//});

//
//ul.addEventListener('mouseout', (event)=>{
//    
//    
//    if (event.target.tagName=="LI"){   
//                 event.target.textContent=event.target.textContent.toLowerCase();
//    }    
//});
//

function upButtonFixer (li1,li2){
    
var up = document.createElement("BUTTON");
up.className = "up"
up.textContent="up"
li1.appendChild(up); 
    
var upper = li2.getElementsByTagName('BUTTON')[0];
li2.removeChild(upper);
}


function downButtonFixer (li1,li2){
    
var down = document.createElement("BUTTON");
down.className = "down"
down.textContent="down" 
li2.appendChild(down);

var downer = li1.getElementsByTagName('BUTTON')[1];
li1.removeChild(downer);
}





ul.addEventListener('click',(event)=>{
        
    if (event.target.tagName == "BUTTON"){
       if (event.target.className=="remove"){
       const par1 = event.target.parentNode;
       const par2 = par1.parentNode;
       par2.removeChild(par1);
   }
       if (event.target.className=="up"){
            
           const first = ul.firstElementChild;
           const second = first.nextElementSibling;
           const last = ul.lastElementChild;
            const secondEnd = last.previousElementSibling;
            const li = event.target.parentNode;
            const prevLi = li.previousElementSibling;
           
            if (prevLi)
                ul.insertBefore(li,prevLi);
        
           
           
           
            if (li == last){
                var z0 = secondEnd.firstElementChild;
                var z1 = secondEnd.lastElementChild;
                var z2 = z1.previousElementSibling;
                remove3Buttons(li);
                addButtons(li);
                secondEnd.removeChild(z2);
            }
           
           
           if (li == second){
                var a1 = li.firstElementChild;
                li.removeChild(a1);
                remove3Buttons(prevLi);
                addButtons(prevLi);
            }}
        
        if (event.target.className=="down"){
            
            const last = ul.lastElementChild;
            const secondEnd = last.previousElementSibling;
            const first = ul.firstElementChild;
            const second = first.nextElementSibling;
            const li = event.target.parentNode;
            const nextLi = li.nextElementSibling;
            if (nextLi)
                ul.insertBefore(nextLi,li);
            
            if (li == secondEnd){
                var z0 = li.firstElementChild;
                var z1 = li.lastElementChild;
                var z2 = z1.previousElementSibling;
                remove3Buttons(nextLi);
                addButtons(nextLi);
                li.removeChild(z2)
            }    
            
            
            if (li == first){
                var z0 = second.firstElementChild;
                var z1 = second.lastElementChild;
                var z2 = z1.previousElementSibling;
                remove3Buttons(li);
                addButtons(li);
                second.removeChild(z0);
            }
                        

   }
   }
});


var first = ul.firstElementChild;
var last = ul.lastElementChild;
var u = first.getElementsByClassName("up")[0];
var d = last.getElementsByClassName("down")[0];
first.removeChild(u);
last.removeChild(d);



    

@import 'https://fonts.googleapis.com/css?family=Lato:400,700';

body {
  color: #484848;
  font-family: 'Lato', sans-serif;
  padding: .45em 2.65em 3em;
  line-height: 1.5;
}
h1 {
  margin-bottom: 0;
}
h1 + p {
  font-size: 1.08em;
  color: #637a91;
  margin-top: .5em;
  margin-bottom: 2.65em;
  padding-bottom: 1.325em;
  border-bottom: 1px dotted;
}
ul {
  padding-left: 0;
  list-style: none;
}
li {
  padding: .45em .5em;
  margin-bottom: .35em;
  display: flex;
  align-items: center;
}
input,
button {
  font-size: .85em;
  padding: .65em 1em;
  border-radius: .3em;
  outline: 0;
}
input {
  border: 1px solid #dcdcdc;
  margin-right: 1em;
}
div {
  margin-top: 2.8em;
  padding: 1.5em 0 .5em;
  border-top: 1px dotted #637a91;
}
p.description,
p:nth-of-type(2) {
  font-weight: bold;
}
/* Buttons */
button {
  color: white;
  background: #508abc;
  border: solid 1px;
  border-color: rgba(0, 0, 0, .1);
  cursor: pointer;
}
button + button {
  margin-left: .5em;
}
p + button {
  background: #52bab3;
}
.list button + button {
  background: #768da3;
}
.list li button + button {
  background: #508abc;
}
li button:first-child {
  margin-left: auto;
  background: #52bab3;
}
.list li button:last-child {
  background: #768da3;
}
li button {
  font-size: .75em;
  padding: .5em .65em;
}

<!DOCTYPE html>
<html>
    
    
    
    <head>
        
        <title>My First Website</title>
        <link rel="stylesheet" href="style.css">

    </head>
    
    
    <body>
    
        <h2>Im the H2!</h2>
        <p>Im the p!</p>
        <button id="toggle">Hide list!</button> 
        
        <div class="list">
            <p class="description">The title of the list</p>
            <input type="text" class="description">
            <button class="description">change the title!</button>
            <ul>
                <li>first </li>
                <li>second</li>
                <li>third</li>
                <li>forth</li>
                <li>fifth</li>
                <li>sixth</li>
                <li>seventh</li>
                
            </ul>
            <input type="text" class="addInput">
            <button class="adder">Add!</button>
            <button class="remover">Remove!</button>
        </div>
        
        
        
            <script src="app.js"></script>
    </body>
    
    
    
    
</html>

Answer 2

This will be the CSS solution for your requirement, this method would be the simplest.

i am using the :last-child and :first-child to show/hide the up and down buttons.

.list>ul>li:first-child>button.up{
  display:none;
}
.list>ul>li:first-child>button.down{
  margin-left: auto;
}
.list>ul>li:last-child>button.down{
  display:none;
}

const listDiv = document.querySelector("div");
const inputDescription = document.querySelector("input.description");
const pDescription = document.querySelector('p.description');
const buttonDescription = document.querySelector('button.description');
const addItemList = document.querySelector('button.adder');
const addInput = document.getElementsByClassName('addInput')[0];
const ul = document.querySelector('ul');
const removeButton = document.querySelector('button.remover');
const lis = ul.children;


function addButtons (li){

    let up = document.createElement("BUTTON");
    up.className = "up"
    up.textContent="up"
    li.appendChild(up);
    
    let down = document.createElement("BUTTON");
    down.className = "down"
    down.textContent="down"
    li.appendChild(down);
    
    let remove = document.createElement("BUTTON");
    remove.className = "remove"
    remove.textContent="remove"
    li.appendChild(remove);
}

for (var i = 0 ; i<lis.length ;i++){
    
    addButtons(lis[i]);
}

buttonDescription.addEventListener('click', ()=>{
   pDescription.textContent = inputDescription.value+':';
});  


addItemList.addEventListener('click',()=>{
    
    let newLI = document.createElement("li"); 
    newLI.textContent = addInput.value;
    addButtons(newLI)
    ul.appendChild(newLI);
    addInput.value = '';
});


removeButton.addEventListener('click', ()=>{
    
    const lastChild = document.querySelector('li:last-child');
    ul.removeChild(lastChild);
    
});



ul.addEventListener('click',(event)=>{
        
    if (event.target.tagName == "BUTTON"){
       if (event.target.className=="remove"){
       const par1 = event.target.parentNode;
       const par2 = par1.parentNode;
       par2.removeChild(par1);
   }
       if (event.target.className=="up"){
        
            const li = event.target.parentNode;
            const prevLi = li.previousElementSibling;
            if (prevLi)
                ul.insertBefore(li,prevLi);
       }
        
        else if (event.target.className=="down"){
           
            const li = event.target.parentNode;
            const nextLi = li.nextElementSibling;
            if (nextLi)
                ul.insertBefore(nextLi,li);                    

   }
   }
});

@import 'https://fonts.googleapis.com/css?family=Lato:400,700';

body {
  color: #484848;
  font-family: 'Lato', sans-serif;
  padding: .45em 2.65em 3em;
  line-height: 1.5;
}
h1 {
  margin-bottom: 0;
}
.list>ul>li:first-child>button.up{
  display:none;
}
.list>ul>li:first-child>button.down{
  margin-left: auto;
}
.list>ul>li:last-child>button.down{
  display:none;
}
h1 + p {
  font-size: 1.08em;
  color: #637a91;
  margin-top: .5em;
  margin-bottom: 2.65em;
  padding-bottom: 1.325em;
  border-bottom: 1px dotted;
}
ul {
  padding-left: 0;
  list-style: none;
}
li {
  padding: .45em .5em;
  margin-bottom: .35em;
  display: flex;
  align-items: center;
}
input,
button {
  font-size: .85em;
  padding: .65em 1em;
  border-radius: .3em;
  outline: 0;
}
input {
  border: 1px solid #dcdcdc;
  margin-right: 1em;
}
div {
  margin-top: 2.8em;
  padding: 1.5em 0 .5em;
  border-top: 1px dotted #637a91;
}
p.description,
p:nth-of-type(2) {
  font-weight: bold;
}
/* Buttons */
button {
  color: white;
  background: #508abc;
  border: solid 1px;
  border-color: rgba(0, 0, 0, .1);
  cursor: pointer;
}
button + button {
  margin-left: .5em;
}
p + button {
  background: #52bab3;
}
.list button + button {
  background: #768da3;
}
.list li button + button {
  background: #508abc;
}
li button:first-child {
  margin-left: auto;
  background: #52bab3;
}
.list li button:last-child {
  background: #768da3;
}
li button {
  font-size: .75em;
  padding: .5em .65em;
}

<!DOCTYPE html>
<html>
    
    
    
    <head>
        
        <title>My First Website</title>
        <link rel="stylesheet" href="style.css">

    </head>
    
    
    <body>
    
        <h2>Im the H2!</h2>
        <p>Im the p!</p>        
        <div class="list">
            <p class="description">The title of the list</p>
            <input type="text" class="description">
            <button class="description">change the title!</button>
            <ul>
                <li>first </li>
                <li>second</li>
                <li>third</li>
                <li>forth</li>
                <li>fifth</li>
                <li>sixth</li>
                <li>seventh</li>
                
            </ul>
            <input type="text" class="addInput">
            <button class="adder">Add!</button>
            <button class="remover">Remove!</button>
        </div>
        
        
        
            <script src="app.js"></script>
    </body>
    
    
    
    
</html>

Answer 3

This can be done using CSS. I have noticed it has moved the first set of buttons to the left but overall this does what you are asking for.

I'm sure you can play around with the css to fix the minor issue.

I have removed the javascript that removes the first up and last down button and used css to hide the first up and last down button using the following...

ul li:first-child .up{ 
    display:none;
}
ul li:last-child .down{ 
    display:none;
}

const listDiv = document.querySelector("div");
const inputDescription = document.querySelector("input.description");
const pDescription = document.querySelector('p.description');
const buttonDescription = document.querySelector('button.description');
const addItemList = document.querySelector('button.adder');
const addInput = document.getElementsByClassName('addInput')[0];
const ul = document.querySelector('ul');
const removeButton = document.querySelector('button.remover');
const lis = ul.children;


function addButtons(li) {

  let up = document.createElement("BUTTON");
  up.className = "up"
  up.textContent = "up"
  li.appendChild(up);

  let down = document.createElement("BUTTON");
  down.className = "down"
  down.textContent = "down"
  li.appendChild(down);

  let remove = document.createElement("BUTTON");
  remove.className = "remove"
  remove.textContent = "remove"
  li.appendChild(remove);
}

for (var i = 0; i < lis.length; i++) {

  addButtons(lis[i]);
}

buttonDescription.addEventListener('click', () => {
  pDescription.textContent = inputDescription.value + ':';
});


addItemList.addEventListener('click', () => {

  let newLI = document.createElement("li");
  newLI.textContent = addInput.value;
  addButtons(newLI)
  ul.appendChild(newLI);
  addInput.value = '';
});


removeButton.addEventListener('click', () => {

  const lastChild = document.querySelector('li:last-child');
  ul.removeChild(lastChild);

});



ul.addEventListener('click', (event) => {

  if (event.target.tagName == "BUTTON") {
    if (event.target.className == "remove") {
      const par1 = event.target.parentNode;
      const par2 = par1.parentNode;
      par2.removeChild(par1);
    }
    if (event.target.className == "up") {

      const li = event.target.parentNode;
      const prevLi = li.previousElementSibling;
      if (prevLi)
        ul.insertBefore(li, prevLi);
    } else if (event.target.className == "down") {

      const li = event.target.parentNode;
      const nextLi = li.nextElementSibling;
      if (nextLi)
        ul.insertBefore(nextLi, li);

    }
  }
});

//Deleted source code to remove first & last up/down buttons

@import 'https://fonts.googleapis.com/css?family=Lato:400,700';
body {
  color: #484848;
  font-family: 'Lato', sans-serif;
  padding: .45em 2.65em 3em;
  line-height: 1.5;
}

h1 {
  margin-bottom: 0;
}

h1+p {
  font-size: 1.08em;
  color: #637a91;
  margin-top: .5em;
  margin-bottom: 2.65em;
  padding-bottom: 1.325em;
  border-bottom: 1px dotted;
}

ul {
  padding-left: 0;
  list-style: none;
}

li {
  padding: .45em .5em;
  margin-bottom: .35em;
  display: flex;
  align-items: center;
}

input,
button {
  font-size: .85em;
  padding: .65em 1em;
  border-radius: .3em;
  outline: 0;
}

input {
  border: 1px solid #dcdcdc;
  margin-right: 1em;
}

div {
  margin-top: 2.8em;
  padding: 1.5em 0 .5em;
  border-top: 1px dotted #637a91;
}

p.description,
p:nth-of-type(2) {
  font-weight: bold;
}


/* Buttons */
/* Added.....*/
ul li:first-child .up{ 
    display:none;
}
ul li:last-child .down{ 
    display:none;
}
button {
  color: white;
  background: #508abc;
  border: solid 1px;
  border-color: rgba(0, 0, 0, .1);
  cursor: pointer;
}

button+button {
  margin-left: .5em;
}

p+button {
  background: #52bab3;
}

.list button+button {
  background: #768da3;
}

.list li button+button {
  background: #508abc;
}

li button:first-child {
  margin-left: auto;
  background: #52bab3;
}

.list li button:last-child {
  background: #768da3;
}

li button {
  font-size: .75em;
  padding: .5em .65em;
}

<h2>Im the H2!</h2>
<p>Im the p!</p>
<div class="list">
  <p class="description">The title of the list</p>
  <input type="text" class="description">
  <button class="description">change the title!</button>
  <ul>
    <li>first </li>
    <li>second</li>
    <li>third</li>
    <li>forth</li>
    <li>fifth</li>
    <li>sixth</li>
    <li>seventh</li>

  </ul>
  <input type="text" class="addInput">
  <button class="adder">Add!</button>
  <button class="remover">Remove!</button>
</div>

</html>

If you have any questions about the edit(s) I have made then please leave a comment below and I will get back to you as soon as possible.

I hope this helps. Happy coding!

Edit: button alignment fix

If you want a quick fix for those buttons you can replace the css to the following

ul li:first-child .up{ 
    visibility:hidden;
}