8378


繰り返しコンテンツ（実際は複数ある`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]


CC BY-SA 3.0
2015-03-25T10:32:55.313
8377
2015-03-26T02:27:44.880
8500
question
javascript jquery
jQueryでユニークIDを追加後に中の特定要素を削除したい


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


CC BY-SA 3.0
2015-03-25T10:47:16.713
8378
2015-03-25T10:47:16.713
3639
8377
answer


`input`が複数あるとのことなので`if`文をなくしてシンプルかつ拡張性のある形にしました。

[code]

    var total = 1;
    var content = $('#content');
    
    function add(type) {
    
      var addContent = $('<div>').attr('id', 'content_' + total);
    
      addContent.html(content.find('.part-' + type));
      addContent.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]


CC BY-SA 3.0
2015-03-26T01:39:19.373
8401
2015-03-26T02:27:44.880
2015-03-26T02:27:44.880
7214
7214
8377
answer