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>