The positioning of a button does not work

Question

I created a button so when I click on it a random card appears. On the random card(s) is an "x". I can't position the "x" in the top right corner and I don't know why it does not work.

I want to create a function so that when I click on the "x" the random card gets deleted.

Here is my HTML:

<button class="plus">
  <div class="item">
    <p> + </p>
  </div>
</button>

<div id="newCardHolder">

</div>

    <div id="cardPrototype" class="card" style="display:none;">
        <p  class="delete">x</p>
      <span> Title </span>
      <form name="theform" style="display:none;">
        <input class="input-feld" type="text">
        <br>
        <input class="input-feld " type="text">
        <br>
        <input class="speichern"type="button" onClick="new Person()" value="Speichern">
        <input class="abbrechen"type="button" onClick="new Person()" value="Abbrechen">
      </form>
    </div>

My CSS:

.input-feld {
    font-family: TheSans Swisscom;
    margin:3px;
}

.card {
            width:300px;
            margin-right:5px; 
            margin-left:5px; 
            margin-bottom:10px; 
            float: left;
            padding:10px; 
            background-color: #BBBBBB; 
            border: 1px solid #ccc; 
            border-radius:10px;
}

.delete {
            font-family:'TheSans Swisscom';
            right:0;
            top:0;
}

.speichern{
    font-family:'TheSans Swisscom';
}

.abbrechen{
    font-family:"TheSans Swisscom";
    background-color: greenyellow; 
}

And my jQuery:

$(document).ready(function () {
    $("button.plus").on("click", function () {
        var newCard = $('#cardPrototype').clone(true); 
        $(newCard).css('display', 'block').removeAttr('id');
        $('#newCardHolder').append(newCard);
    });

    $('body').on('click', '.card', function () { 
        $(this).find('form').show();
        $(this).find('span').remove();
    });
});

Answer 1

Just a few little things to add to your CSS to make it work.

$(document).ready(function() {
  $("button.plus").on("click", function() {
    var newCard = $('#cardPrototype').clone(true);
    $(newCard).css('display', 'block').removeAttr('id');
    $('#newCardHolder').append(newCard);
  });

  $('body').on('click', '.card', function() {
    $(this).find('form').show();
    $(this).find('span').remove();
  });
});

.input-feld {
  font-family: TheSans Swisscom;
  margin: 3px;
}

.card {
  position: relative;
  width: 300px;
  margin-right: 5px;
  margin-left: 5px;
  margin-bottom: 10px;
  float: left;
  padding: 10px;
  background-color: #BBBBBB;
  border: 1px solid #ccc;
  border-radius: 10px;
}

.delete {
  font-family: 'TheSans Swisscom';
  right: 5px;
  top: 0;
  position: absolute;
  display: block;
  margin: 0;
  line-height: 1;
}

.speichern {
  font-family: 'TheSans Swisscom';
}

.abbrechen {
  font-family: "TheSans Swisscom";
  background-color: greenyellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="plus">
  <div class="item">
    <p> + </p>
  </div>
</button>

<div id="newCardHolder">

</div>

<div id="cardPrototype" class="card" style="display:none;">
  <p class="delete">x</p>
  <span> Title </span>
  <form name="theform" style="display:none;">
    <input class="input-feld" type="text">
    <br>
    <input class="input-feld " type="text">
    <br>
    <input class="speichern" type="button" onClick="new Person()" value="Speichern">
    <input class="abbrechen" type="button" onClick="new Person()" value="Abbrechen">
  </form>
</div>

I set position: relative; to the div with class card and added some styles to the delete <p> tag. I would recommend changing the delete "button" for a <span> element or an <i> element for good practice. Then you would not need to worry about setting margin: 0; etc and positioning it would be easier. If you would change it to span you could alter the $(this).find('span').remove(); function to search for a specific class or change the title to be in a heading element. Also if you would change it inside a <i> tag you would probably want to set font-style: normal; to it.

Answer 2

To position your little x with that CSS you'll need to set it to be relative to its parent, which is a little counter-intuitive if you haven't done it before.

.card {
  position: relative;
}

.card .delete {
  position: absolute;
}

To get it to act as a close button, you'll just need to duplicate the jQuery you have but do the opposite:

$('body').on('click', '.card .delete', function () { 
    $(this).closest('.card').remove();
});

That's one way of doing it, anyway.

Answer 3

You need to add position: absolute to the .delete class. And to make this work on the correct item you need to add position: relative to the card. This makes the position of the delete relative to the card.

Answer 4

You don't have position, it's because it doesn't work. Change to this:

.card { 
       position: relative;
}
.delete {
       position: absolute;
       font-family:'TheSans Swisscom';
       right:0;
       top:0;
}

The .card needs to be relative to allow .delete positioning attached to the card, with absolute positioning.