Question

HTML：

<ul id="ll">
    <li class="ba">Blah1<a id="nex" href="#">Run Test</a></li>
</ul>

使用Javascript：

$(document).ready(function() {

    $('#ll li').append('<li class="ba" id="new">Blah2<a id="dll" href="#">del</a></li><li class="ba">Blah3<a id="dll" href="#">del</a></li><li class="bba">Blah4<a id="dll" href="#">del</a></li><li class="bba">Blah5<a id="dll" href="#">del</a></li>');

    $('#nex').click(function() {
        var ne = $('#nex').next().html();
        console.log(ne);
        $('#ll:first-Child').empty().append(ne);

        //$('#ll:first-Child').empty().replaceWith(ne);
    });
});


$(document).on('click', '#dll', function() {
    $(this).parent().remove();
});

在这段代码中，我想动态地将子元素添加到列表中，然后在添加元素之后，我想将第一个子节点替换为当前的子节点，通过替换所有子节点来删除，只删除第二个子节点已被替换为第一个孩子。然后我还想通过单击del link删除列表的当前子项。

http://jsfiddle.net/V6g8d/26/

Answer 1

页面上不能有重复的id属性，并将它们用作选择器。您的意思是使用类吗？

$(document).ready(function() {

  $('#ll')
    .append('<li class="ba">Blah2<a href="#">del</a></li><li class="ba">Blah3<a href="#">del</a></li><li class="ba">Blah4<a href="#">del</a></li><li class="ba">Blah5<a href="#">del</a></li>')
    .on('click', 'li a', function() {
      $(this).parent().remove();
    });

  $('#nex').click(function() {
    $(this).parent().clone().appendTo('#ll').children('a').text('del');
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ll">
  <li class="ba">Blah1<a id="nex" href="#">Run Test</a></li>
</ul>

Answer 2

这里有一个jsfiddle工作

<ul id="ll">
    <li class="ba">Blah1<a id="nex" href="#">Run Test</a></li>
</ul>


$(document).ready(function(){

$('#ll').append('<li class="ba" id="new">Blah2<a class="dll" href="#">del</a></li><li class="ba">Blah3<a class="dll" href="#">del</a></li><li class="bba">Blah4<a class="dll" href="#">del</a></li><li class="bba">Blah5<a class="dll" href="#">del</a></li>');

$('#nex').click(function(){
    var $nex = $(this);
    $nex.closest("li.ba").remove();
});

$(document).on('click','.dll',function(){
      $(this).closest("li").remove();
  });

});

https://jsfiddle.net/at515Lpy/

基本上你有很多错误：

您正在另一个li中添加li
您正在使用重复的#ids，因此我将其更改为＆＃34; dll＆＃34;类。
不太清楚＆＃34;运行测试＆＃34;应该这样做，基本上，我删除第一个div。

你需要什么＆＃34;运行测试＆＃34;要做什么？

Answer 3

嗨，现在我想要这个。

＆＃13;

$(document).ready(function() {

  $('#ll > li').after('<li class="ba" class="new">Blah2<a class="dll" href="#">del</a></li><li class="ba">Blah3<a class="dll" href="#">del</a></li><li class="bba">Blah4<a class="dll" href="#">del</a></li><li class="bba">Blah5<a class="dll" href="#">del</a></li>');
    
    $('.dll').on('click', function(){
        $(this).parent().remove();
    });
    
});

＆＃13;

#nex{
    font-weight:bold;
    color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="ll">
    <li class="ba">Blah1<a id="nex" href="#">Run Test</a></li>

</ul>

＆＃13;

在单个页面中的id上使用如果您习惯使用多个比使用类我在本例中使用类检查它。

如何在删除列表的第一个孩子时避免删除所有孩子？

3 个答案: