Reto.K Reto.K - 3 months ago 18
CSS Question

How can i make a delete Button?

So i have made a button that generates random cards when i click on it. when i click on the card it will show two text fields and two buttons.

Now i wanna make a button (in my code the button should be "x") on the random card to delete the random card. Sadly this does not work. Can you guys help me?

This is my code:



$(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();

});
});

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

.input-feld {
font-family: TheSans Swisscom;
margin: 3px;
width: 260px;
}
.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;
position: relative;
}
.delete {
font-family: 'TheSans Swisscom';
right: 12px;
top: 0;
position: absolute;
}
.speichern {
font-family: 'TheSans Swisscom';
background-color: greenyellow;
}
.abbrechen {
font-family: "TheSans Swisscom";
background-color: red;
}

<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>




Answer

Your delete selector is wrong, try .card .delete:

$(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();

  });

  /*delete button*/
  $('body').on('click', '.card .delete', function() {
    $(this).closest('.card').remove();
  });
});
.input-feld {
  font-family: TheSans Swisscom;
  margin: 3px;
  width: 260px;
}
.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;
  position: relative;
}
.delete {
  font-family: 'TheSans Swisscom';
  right: 12px;
  top: 0;
  position: absolute;
}
.speichern {
  font-family: 'TheSans Swisscom';
  background-color: greenyellow;
}
.abbrechen {
  font-family: "TheSans Swisscom";
  background-color: red;
}
<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>