jQueryでユニークIDを追加後に中の特定要素を削除したい
繰り返しコンテンツ(実際は複数あるinput
要素ですが、テストの為)を挿入するボタンを使いたいのですが、display:none
の要素をpart-oneとpart-twoに分けて表示させたいのですが、ユニークで生成されたidの場合、$(newId > .part-one)``$(newId > .part-two)
のように指定できますでしょうか?
var total = 1;
var content = $('#content');
function add(type) {
if (type === 'one') {
var newId = 'content_' + total;
var clonedContent = content.clone().attr('id', newId);
//part-twoのみ削除
clonedContent.insertBefore(content);
} else {
var newId = 'content_' + total;
var clonedContent = content.clone().attr('id', newId);
//part-oneのみ削除
clonedContent.insertBefore(content);
}
total++;
}
#content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button onclick="add('one')">one</button>
<button onclick="add('two')">two</button>
<div id="content">
<div class="part-one">
this is part-one
</div>
<div class="part-two">
this is part-two
</div>
<div class="part-one">
this is part-one
</div>
<div class="part-two">
this is part-two
</div>
<div class="part-one">
this is part-one
</div>
<div class="part-two">
this is part-two
</div>
<div class="part-one">
this is part-one
</div>
<div class="part-two">
this is part-two
</div>
</div>