After searching thoroughly, the problem still remains elusive. Space seems to be mysteriously added to each list item within this code block. My suspicion lies with the for loop as it consistently adds a fixed amount of space.
https://i.sstatic.net/0giRG.png
The code in question is as follows:
$(function(){
$.get('/frameworks', appendToList);
//Handling POST requests
$('form').on('submit', function(event) {
event.preventDefault();
var form = $(this);
var frameworkData = form.serialize();
$.ajax({
type: 'POST',
url: '/frameworks',
data: frameworkData
}).done(function(frameworkName) {
frameworkName = frameworkName[0].toUpperCase() + frameworkName.slice(1).toLowerCase();
appendToList([frameworkName]);
form.trigger('reset');
});
});
//Delete event
function appendToList(frameworks) {
var list = [];
for(var i in frameworks) {
framework = frameworks[i];
content = '<a href="/frameworks/' +framework+'">' +framework+ '</a>' + '<a href="#" data-framework="' +framework+ '"><img src="del.png"></a>';
list.push($('<li>', { html: content }));
}
$('.frameworks-list').append(list);
console.log(list);
}
});
What could possibly be overlooked?
Below is how the resulting HTML appears:
<ul class="frameworks-list">
<li>
<a href="/frameworks/React">React</a>
<a href="#" data-framework="React"><img src="del.png"></a>
</li>
<li>
<a href="/frameworks/Express">Express</a>
<a href="#" data-framework="Express"><img src="del.png"></a>
</li>
<li>
<a href="/frameworks/Angular">Angular</a>
<a href="#" data-framework="Angular"><img src="del.png"></a>
</li>
</ul>
It's apparent that the closing li tag seems misplaced. I attempted adding the following line:
list.push($('<li>', { html: content }), '</li>'); //--------THIS LINE----------
Unfortunately, the alteration proved ineffective.
I recalled that removing the image resulted in:
content = '<a href="/frameworks/' +framework+'">' +framework+ '</a>' + '<a href="#" data-framework="' +framework+ '"><span>X</span></a>';
This change yielded:
https://i.sstatic.net/p6jo6.png
Evidently, there seems to be an issue related to the image included.