Buttons not appearing properly after dynamically appending

Question

I have a list of options the user can choose, and when the user clicks a button for the option, there is a jquery implementation that removes the button and appends a tag at the top of the page, the user has the option to remove this tag by clicking the 'X' on the tag and it will then be removed, and the button is place (append) back to where it came from. Everything is working except on page load, the buttons are all spaced apart appropriately, but if the user clicks the button and then decides to remove the tag from their selections, when the button is appended back to its original div, it touches the other buttons:

And if the user decides they don't want option any more, and remove it, the button is appended back to the original div, like this:

There is no margins or padding on the original images CSS, so I can't figure out what's causing this.

The HTML for the buttons is as follows:

<div id="skills-selection">
        <h4>Skills:</h4> 
        <div id="skill-row">
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 1</button>
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 2</button>
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 3</button>
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 4</button>
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 5</button>
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 6</button>
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 6</button>
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 7</button>
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 8</button>
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 9</button>
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 10</button>
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 11</button>
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 12</button>
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 13</button>
            <button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 14</button>
        </div>
    </div><!--skills selection-->

The jquery is as follows :

$(document).on('click', '.skilltag', function() {
var txt = $(this).text();
$(".chosen-tags").append("<span class='tag label label-info choice-tag'>" + txt + "<span class='remove-skilltag' data-role='remove'>&nbsp&nbsp x &nbsp&nbsp</span></span>");
$(this).remove(); });



$(document).on('click', '.remove-skilltag', function() {
var txt = $(this).parent().clone().children().remove().end().text();
$(this).parent().remove();
$("#skill-row").append("<button type='button' class='btn btn-primary skilltag' data-toggle='button' aria-pressed='false' autocomplete='off'>" + txt + "</button>"); });

and the CSS that is style the buttons is:

.skilltag {
width: 80px;
line-height: .5;
height: 20px;
text-align: center;
display: inline-block; }

Does anyone know why this is happening?

Answer 1

White space is your issue, items horizontally aligned with display:inline-block take into account whitespace/linebreaks between elements.

Your markup starts like:

<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 9</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 10</button>

but after appending your markup won't have the linebreak like so:

<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 9</button><button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 10</button>

You can either start your markup without the whitespace/linebreaks

or swap to floats to override display:inline-block

.skilltag {
   float:left;
   margin:2px;
   ...

}

Or change your append code to include whitespace

Answer 2

There is break after each button in your html tag so which is why you see some space between the buttons. But when the button is appended back to its place there is not any brake between it and the last button before it so it will leave no space. Another thing is you did'nt give them some margin in your css.

Answer 3

Because the buttons elements are inline-block when you're appending them there's no white space, whereas in your HTML there is white space.

If you add a space after the append tag it should resolve the issue. However it might be preferable to alter the CSS to space the buttons.

$(document).on('click', '.skilltag', function () {
    var txt = $(this).text();
    $(".chosen-tags").append("<span class='tag label label-info choice-tag'>" + txt + "<span class='remove-skilltag' data-role='remove'>&nbsp&nbsp x &nbsp&nbsp</span></span>");
    $(this).remove();
});



$(document).on('click', '.remove-skilltag', function () {
    var txt = $(this).parent().clone().children().remove().end().text();
    $(this).parent().remove();
    $("#skill-row").append("<button type='button' class='btn btn-primary skilltag' data-toggle='button' aria-pressed='false' autocomplete='off'>" + txt + "</button> ");
});

Jsfiddle with it working: http://jsfiddle.net/juy2wknd/1/