HAPbuilder v2 - přidat řádky

by Petr Haluza

HTML

<div class="box">
<div>
obrazek
</div>
<div>
<h2>nadpis</h2>
<div class="box-pro-klony">

  <div class="klon">
    <h3 contenteditable="true">Vychytávka</h3>
    <p contenteditable="true">Popis vzhcztavkz</p>
    <button class="odebrat-klon">x</button>
  </div>
  
</div>
<span class="klonuj">Přidat řádek</span>
</div>
</div>


<div class="box">
<div class="box-pro-klony">

  <div class="klon">
    <h3 contenteditable="true">Parametr</h3>
    <button class="odebrat-klon">x</button>
  </div>
  
</div>
<span class="klonuj">Přidat řádek</span>
</div>

CSS

.box { border:1px solid blue; width:500px; }
.box-pro-klony { width:250px;border:1px solid red}
.odebrat-klon, 
.klonuj { cursor: pointer; width: 1em; height:1em; background:#ccc}
.klon:first-child .odebrat-klon { display:none; }
.klon{ background: #F9F9F9;  padding: .5em;  margin: 1em;}



*[contenteditable="true"] {position:relative}
*[contenteditable="true"]:hover {
  border:1px dotted #ea0000;
}

*[contenteditable="true"]:focus {
  border:1px solid #ea0000;
}

JavaScript

function clone() {
  var new_clone = $(this).prev(".box-pro-klony").children().last(".klon").clone();
    $(this).prev(".box-pro-klony").append(new_clone);
}
function remove() {
  $(this).closest(".klon").remove();
}
$(".klonuj").on("click", clone);
$(document).on("click", ".odebrat-klon", remove);