jQueryでユニークIDを追加後に中の特定要素を削除したい


繰り返しコンテンツ（実際は複数ある`input`要素ですが、テストの為）を挿入するボタンを使いたいのですが、`display:none`の要素をpart-
oneとpart-twoに分けて表示させたいのですが、ユニークで生成されたidの場合、`$(newId > .part-one)``$(newId >
.part-two)`のように指定できますでしょうか？

[code]

    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++;
    }
[/code]

[code]

    #content {
      display: none;
    }
[/code]

[code]

    <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>
[/code]




`children()`と`remove()`を組み合わせることで実現できます。

[code]

    var total = 1;
    var content = $('#content');
    
    function add(type) {
    
      if (type === 'one') {
        var newId = 'content_' + total;
        var clonedContent = content.clone().attr('id', newId);
        clonedContent.children('.part-two').remove();
        clonedContent.insertBefore(content);
      } else {
        var newId = 'content_' + total;
        var clonedContent = content.clone().attr('id', newId);
        clonedContent.children('.part-one').remove();
        clonedContent.insertBefore(content);
      }
      total++;
    }
[/code]

[code]

    #content {
      display: none;
    }
[/code]

[code]

    <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>
[/code]




`children()`と`remove()`を組み合わせることで実現できます。

[code]

    var total = 1;
    var content = $('#content');
    
    function add(type) {
    
      if (type === 'one') {
        var newId = 'content_' + total;
        var clonedContent = content.clone().attr('id', newId);
        clonedContent.children('.part-two').remove();
        clonedContent.insertBefore(content);
      } else {
        var newId = 'content_' + total;
        var clonedContent = content.clone().attr('id', newId);
        clonedContent.children('.part-one').remove();
        clonedContent.insertBefore(content);
      }
      total++;
    }
[/code]

[code]

    #content {
      display: none;
    }
[/code]

[code]

    <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>
[/code]

