javascript - jquery复制没有子内容的html内容

Question

我尝试使用jquery将没有子元素的ul元素的html内容复制到输入框(到值参数)。可以这样做吗？

这是我的代码:

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