代码之家 › 专栏 › 技术社区 › Bryan Dellinger

使用jquery删除克隆元素的一部分

jquery-clone jquery javascript

3

Bryan Dellinger · 技术社区 · 6 年前

let myhtml = `<div style="border: 1px solid black;" class="mycontainer">
                clone me
                <div class="noClone">
                 do not clone me
                </div>
                <button class="clonebtn"> clone it </button>
             </div>`

$(document).ready(function() {
  let content = $(myhtml);
  $('.row').append(content);

  $('.row').on('click', '.clonebtn', function() {
    let container = $(this).closest('.mycontainer');
    let clonedContainer = container.clone();
    clonedContainer.remove('.noClone');
    $('.row').append(clonedContainer);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">

  </div>
</div>

或者在这里拉小提琴 https://jsfiddle.net/k6jz9xe2/3/

2 回复 | 直到 6 年前

1

0

Learner 6 年前

let myhtml = `<div style="border: 1px solid black;" class="mycontainer">
                clone me
                <div class="noClone">
                 do not clone me
                </div>
                <button class="clonebtn"> clone it </button>
             </div>`

$(document).ready(function() {
  let content = $(myhtml);
  $('.row').append(content);

  $('.row').on('click', '.clonebtn', function() {
    let container = $(this).closest('.mycontainer');
    let clonedContainer = container.clone();
    clonedContainer.find('.noClone').remove();
    $('.row').append(clonedContainer);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">

  </div>
</div>

2

1

Unmitigated 6 年前

你需要使用 .find() 查找父div中的所有元素 noClone 移除。

$(selector).remove(anotherselector) anotherselector 从返回的数组中 selector . 给 remove() 函数仅应用于jQuery集合中包含的元素,而不应用于这些元素的子元素。它类似于 $(selector).filter(anotherselector).remove()

请考虑以下HTML和jQuery代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
Foo 
<div id="bar">Bar</div>
</div>
<script>
$('#foo').remove('#bar');
</script>

你可以期待 id 身份证件 “foo”将被删除,但事实并非如此。为什么?这个 $('#foo') div 与 身份证件 关于“foo”。jQuery试图 filter 通过数组并找到与 $('#bar') 选择器。找不到元素,将不会发生任何事情。

但是,下面的选择器将使用 “酒吧”。

$('div').remove('#bar');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
Foo 
<div id="bar">Bar</div>
</div>
<script>
$('div').remove('#bar');
</script>

这个 $('div') 选择器返回一个数组,其中在页面上。jQuery通过所有找到一个 分区 $('酒吧') 选择器(具有 身份证件

let myhtml = `<div style="border: 1px solid black;" class="mycontainer">
                clone me
                <div class="noClone">
                 do not clone me
                </div>
                <button class="clonebtn"> clone it </button>
             </div>`;

$(document).ready(function() {
  let content = $(myhtml);
  $('.row').append(content);

  $('.row').on('click', '.clonebtn', function() {
    let container = $(this).closest('.mycontainer');
    let clonedContainer = container.clone();
    clonedContainer.find('.noClone').remove();
    $('.row').append(clonedContainer);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">

  </div>
</div>