jQuery appends list items closer together at each input submission

294
June 17, 2017, at 5:54 PM

Position of the <li>(input value) and the <div>(delete button) is only correct after submitting the first input. At each other submission are these elements closer and closer together, which is not the desired behaviour. I'd like every input to be looking as the first one.

Here's the Pen.

HTML:

<div class="list-container">
    <ul class="list">
    </ul>
</div>

CSS:

ul {
text-align: center;
list-style: none;
font-family: 'Noto Sans', sans-serif; 
}
li {    
float: left;
padding-top: 8px;
padding-bottom: 8px;
}
.btnDel {
float: right;
font-family: 'Raleway'; 
width: 70px;
height: 20px;
border-radius: 15px;
border: 1px solid #F64747;
background-color: white;
padding-top: 3px;
padding-bottom: 1px;
color: #F64747;
cursor: pointer;
}

jQuery:

$('input[name=listItem]').enterKey(function(){
    var toAdd = $('input[name=listItem]').val();
    $('.list').append('<li class="item">' + toAdd + '</li>', '<div class="btnDel">Delete</div>', '<br>')
Answer 1

Actually your are appending wrong structure. You should not use any other element as a direct child of ul.

I have updated your code here is new code and it is working great.

Here Some JS Modifications

// Form submit & Form clear function for Enter key press
    $('input[name=listItem]').enterKey(function(){
        var toAdd = $('input[name=listItem]').val();
        $('.list').append('<li class="item"><p>' + toAdd + '</p><div class="btnDel">Delete</div></li>')
    $('input[name=listItem]').closest('form').find("input[type=text]").val("")
    })
    // Form submit & Form clear function for button press
    $('#btnAdd').click(function(){
        var toAdd = $('input[name=listItem]').val();
        $('.list').append('<li class="item"><p>' + toAdd + '</p><div class="btnDel">Delete</div></li>')
    $('input[name=listItem]').closest('form').find("input[type=text]").val("")
    })

And Some CSS Modifications

li{ 
    clear:both;
    padding-top: 8px;
    padding-bottom: 8px;
    cursor: pointer;
}
li>p{
  float:left;
}
li>div{
  float:right;
}
Answer 2

It happens because each succeeding todo-item in your case tries to float around preceeding.

The fast and nasty fix may be to add clear:left to li, see updated pen.

li {    
    float: left;
    clear: left;
    ...

But actually you have to rework your markup - you should not insert anything except li inside ul.

Rent Charter Buses Company
READ ALSO
Javascript Toggle closed

Javascript Toggle closed

I have a problem with a jQuery script

356
Can not copy text into Clipboard - JavaScript

Can not copy text into Clipboard - JavaScript

I am trying to copy csv based data (from SlickGrid), in to system clipboardFor small chunks of data it is working fine, but when I have large set of data it is unable to copy into system clipboard

395
prevent jvectormap target image blinking

prevent jvectormap target image blinking

i m trying to implement jvectormap , this code is available on jvectormap's example , loads perfectly on page load, but when i try to add new markers in the existing map images(markers) blinks , facing same problem while adding new markers in ajax response

354