繁体   English   中英

无法使用JQUERY删除html内容

[英]Unable to remove html content using JQUERY

我无法删除ID为"Third" div并在ID为"Fourth" div中显示结果内容。 请注意:-我需要将#Third内容附加到#Fourth ,然后在以后删除。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../jquery-ui-1.10.4.custom/js/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="../jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script>
    <link href="../jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css"
        rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        $(function() {
            var widget = {}
            $("#Vshowdialog").click(function() {
                widget.doInitialize();
            });
            widget.doInitialize = function() {
                $("#Fourth").append($("#First").html());
                $("#Fourth").append($("#Second").html());
                $("#Fourth").append($("#Third").html());
                widget.showLightBox();
            };
            widget.showLightBox = function() {
            text = $('#Fourth').html();
            $(text).find("#Third").remove();
            $("#Fourth").dialog();
            };
        });
    </script>

</head>
<body>
    <input type="button" id="Vshowdialog" value="ShowDialog" />
    <div id="First">
        <div id="content">
            This is my main Firstcontent.</div>
        <div id="sidebar">
            This is a FirstSideBar</div>
    </div>
    <div id="Second">
        <div id="secondOne">
            This is my main Second content.</div>
        <div id="secondTwo">
            This is a second sidebar</div>
    </div>
    <div id="Third">
    hello
        <div id="thirdOne">
            This is my main third content.</div>
        <div id="thirdTwo">
            This is a third sidebar</div>
    </div>
    <div id="Fourth">
    </div>
</body>
</html>

您可以使用:

$('#Fourth').append($('#third'));
$('#thirdOne').unwrap();

工作演示

要么

$('#Fourth').append($('#Third')).find('#thirdOne').unwrap();

工作演示

 $(function() {
        var widget = {}
        $("#Vshowdialog").click(function() {
            widget.doInitialize();
        });
        widget.doInitialize = function() {
            $("#Fourth").append($("#First").html());
            $("#Fourth").append($("#Second").html());
            $("#Fourth").append($("#Third").html());
            widget.showLightBox();
        };
        widget.showLightBox = function() {
        $('#Fourth').find("#thirdOne").remove();
        $('#Fourth').find("#thirdTwo").remove();
        $("#Fourth").dialog();
        };
    });

试试这个,它将正常工作。

您要将其他元素的“内部html”附加到#Fourth 为了保持标识符完整,您应该这样做:

$('#First,#Second,#Third').appendTo('#Fourth');

然后,在稍后阶段,您只需删除#Third

$('#Third').remove();

您将要初始化此变量

text = $('#Fourth').html();

但是,当您仅包含内部html时,您会在#Fourth中寻找#Third

var text = $('#Fourth').html(); //contents of fourth
$(text).find("#Third").remove(); //third was added as inner Html without the wrapping container.

你应该能够改变

 $("#Fourth").append($("#Third").html());

 $("#Fourth").append($("#Third"));

真正的问题是,为什么要在第三位到第四位添加然后删除它? 假设代码是固定的,则在执行时,您的代码与此等效。

$("#Fourth").append($("#Third"));
$("#Fourth").find("#Third").remove();
//cache the third div content
var tempThird = $('#Third');
//add your result to Fourth div
$('#Fourth').html("resultcontent");
//remove the third div
$('#Third').remove();
//tempThird will still have the essence of #Third div which you can use anywhere.

您可以在http://api.jquery.com/remove/上查看删除API文档。

希望这能解决您的问题。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM