jQuery的复制HTML内容没有子内容

Question

我尝试复制一个ul元素的HTML内容没有它的子元素到jQuery的输入框（值参数）。有可能这样做吗？

这里是我的代码：

<ul id="from"> 
    <li>test 1<button type="button" class="delete">DEL</button></li> 
    <li>test 2<button type="button" class="delete">DEL</button></li> 
    <li>test 3<button type="button" class="delete">DEL</button></li>       </ul> 

<input type="text" id="to" value="..."> 
<button type="button" id="btn" valu="copy">COPY</button> 
<script> 
$(document).ready(function(){ 
    $('#btn').click(function() 
        { 
         $('#to').val($('#from').html()); 
        }); 
    }); 
</script> 

我想看到这些修改后的li元素（无按键）：

<li>test 1</li> 
<li>test 2</li> 
<li>test 3</li> 

，这将是这个结果输入标签：

<input type="text" id="to" value="<li>test 1</li><li>test 2</li><li>test 3</li>"> 

Answer 1

您可以clone和remove不需要的元素：

$('#btn').on('click', function(e) { 
 
    $('#to').val($('#from').clone() 
 
      .find('button').remove().end().html()); 
 
});

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

 

 
<ul id="from"> 
 
    <li>test 1 
 
     <button type="button" class="delete">DEL</button> 
 
    </li> 
 
    <li>test 2 
 
     <button type="button" class="delete">DEL</button> 
 
    </li> 
 
    <li>test 3 
 
     <button type="button" class="delete">DEL</button> 
 
    </li> 
 
</ul> 
 

 
<input type="text" id="to" value="..."> 
 
<button type="button" id="btn" valu="copy">COPY</button>

Answer 2

克隆它并删除的按钮。

var temp = $('#from').clone() 
temp.find("button").remove() 
console.log(temp.html()) 

Answer 3

你想要这样的东西吗？

$(document).ready(function(){ 
 
    $('#btn').click(function() { 
 
    var clone = $("#from").clone(); 
 
    clone.find("button").remove(); 
 
    $('#to').val(clone.html().replace(/ /g, "")); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="from"> 
 
    <li>test 1<button type="button" class="delete">DEL</button></li> 
 
    <li>test 2<button type="button" class="delete">DEL</button></li> 
 
    <li>test 3<button type="button" class="delete">DEL</button></li> 
 
</ul> 
 

 
<input type="text" id="to" value="..."> 
 
<button type="button" id="btn" valu="copy">COPY</button>