Question

在父div中，我试图在下面的javascript中添加/ appedn html内容显示。我也试图删除现有的html，父div中预先存在的html，它就像类似的所有内容。

关于如何做到这一点的任何想法？

<script>
    $(document).ready(function(){
        $('.like').click(function (e) {
            e.preventDefault();
            $(this).parent().append("<a href = '#' class = 'unlike'><div class = 'heart'></div></a>");
            // $(this).parent().('.like').empty();

            console.log('liked');
        })
    })
 </script>



                   <div>                  
                    <a href = "#" class = 'like'>
                        <div class = 'coal'></div>
                    </a>
                  </div>

Answer 1

尝试$(this).parent().html("<a href = '#' class = 'unlike'><div class = 'heart'></div></a>");

Answer 2

试试这个：

$(this).parent().('.like').remove();

Answer 3

删除以前的html

$('.like').click(function () {
  $(this).parent()
  .html('');
  return false;
})

这将删除HTML代码，下一步将添加您要添加的html。

附加代码

$('.like').click(function () {
  $(this).parent()
  .append('<a href = '#' class = 'unlike'><div class = 'heart'></div></a>');
  return false;
})

所以不要试图用新的代码替换以前的代码。

用较新的html替换以前的html

这可以解决问题

$('.like').click(function () {
  $(this).parent()
  .html('<a href = '#' class = 'unlike'><div class = 'heart'></div></a>');
  return false;
})

这段代码有什么作用？

当您单击具有类like的元素时，将首先执行此操作。然后它将转到父元素，并更新其html代码;这意味着它内部的所有内容，以及您将在括号内提供的代码。然后return false替代e.preventDefault，如果您愿意，可以使用该{{1}}。

Answer 4

试试这个

$(document).ready(function(){
        $('.like').click(function (e) {
            e.preventDefault();

            $(this).parent().append("<a href = '#'   class ='unlike'><div class = 'heart'>unlike</div></a>");

            $(this).parent().find('.like').remove();

           console.log('liked');
        })
    })

检查工作jfiddle

锄头有帮助..

如何使用javascript删除父div中的内容？

4 个答案:

删除以前的html

附加代码

用较新的html替换以前的html