After following a todo list tutorial, everything was running smoothly until I decided to add some styling to it. I placed a Font Awesome trash can icon inside a button with the class "remove." Essentially, I removed all the styles from the button, leaving just the trash icon. Users can click it to delete their todo list item, which works as expected. I attempted to align the trash can icon to the right of the task that pops up. It aligns correctly, but with each new task added, the trash can icon drifts further right.
I will attempt to share only the relevant code as I am unsure why this issue is occurring. Bootstrap is being utilized for styling, and it appears that neither it nor the circular plus sign button is impacting the tasks being generated. Any suggestions would be greatly appreciated, thank you!
function get_todos() {
var todos = new Array;
var todos_str = localStorage.getItem('todo');
if (todos_str !== null) {
todos = JSON.parse(todos_str);
}
return todos;
}
function add() {
var task = document.getElementById('task').value;
var todos = get_todos();
todos.push(task);
localStorage.setItem('todo', JSON.stringify(todos));
show();
return false;
}
//This is mostly where the remove button takes place
function remove() {
var id = this.getAttribute('id');
var todos = get_todos();
todos.splice(id, 1);
localStorage.setItem('todo', JSON.stringify(todos));
show();
return false;
}
function show() {
var todos = get_todos();
var html = '<ul>';
for(var i=0; i < todos.length; i++) {
html += '<li>' + todos[i] + '<button class="remove" id="' + i + '"><i class="fa fa-trash" aria-hidden="true"></i></button></li>';
};
html += '</ul>';
document.getElementById('todos').innerHTML = html;
var buttons = document.getElementsByClassName('remove');
for (var i=0; i < buttons.length; i++) {
buttons[i].addEventListener('click', remove);
};
}
document.getElementById('add').addEventListener('click', add);
show();
.remove { /* Trash can button */
color: #C0C0C0;
font-size: 24px;
border: 0;
padding: 0;
background-color: transparent;
float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" <br> integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" <br> crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" <br> integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" <br> crossorigin="annoymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" <br> integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" <br> crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" <br> integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" <br> crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container" style="margin-top:200px;">
<div class="row justify-content-center">
<div class="col-sm-12 col-lg-8">
<h1 style="padding-bottom:20px;">Test</h1>
<div class="form-group">
<input type="text" class="form-control" id="task">
</div>
</div>
<div class="row justify-content-center" style="margin-top:20px;">
<div class="col-sm-12 col-sm-8">
<div id="todos"></div>
</div>
</div>
<div class="row">
<div class="col"></div>
<div class="col-xs-2" style="margin-right:15px; margin-top:30px;">
<button id="add" style="border-radius:50%; font-size:35px; width:65px;" class="btn btn-danger">+</button>
</div>
</div>
</div>