0

所以这是我的代码：

<input type = checkbox id = "kinch" name = "link" > Bunz </input>
<div id = bootypipe></div>

这是JavaScript：

$("#kinch").click(function(){

    if ($("#kinch").is(":checked")) {

        //Add image to div bootypipe
         $("#bootypipe").append("<image id = 'chink' src = 'http://4.bp.blogspot.com/_TUdhYRa2Xm0/RsuDa4NvSEI/AAAAAAAAAQs/jr_r6v_SUgs/s320/New-England-Style-Hot-Dog-Buns_8A827671.jpg'>HA!</image>");

    } else {


        $("#chink").remove();

    }
});

这是jsfiddle：http: //jsfiddle.net/shrimpboyho/wUu34/13/

图像删除并附加，但是当我删除图像时，文本Ha!仍然保留并随着时间的推移而增加。我怎样才能删除这个？

4

4 回答 4

2

因为您只删除图像标签而不是文本。你可以这样做

用一个 div 包装图像和文本，然后删除 div 标签，如

$("#kinch").click(function(){

    if ($("#kinch").is(":checked")) {

        //Add image to div bootypipe
         $("#bootypipe").append("<div id='chink_outer'><img id = 'chink' src = 'http://4.bp.blogspot.com/_TUdhYRa2Xm0/RsuDa4NvSEI/AAAAAAAAAQs/jr_r6v_SUgs/s320/New-England-Style-Hot-Dog-Buns_8A827671.jpg'/>HA!</div>");

    } else {


        $("#chink_outer").remove();

    }
});

演示

于 2013-01-30T04:15:49.097 回答
2

你不能这样做：

$("#bootypipe").empty();

而不是删除图像。

于 2013-01-30T04:16:52.957 回答
1 
<image id = 'chink' src = 'http://4.bp.blogspot.com/_TUdhYRa2Xm0/RsuDa4NvSEI/AAAAAAAAAQs/jr_r6v_SUgs/s320/New-England-Style-Hot-Dog-Buns_8A827671.jpg'>HA!</image>

是无效的 HTML 标记；该元素实际上不能包含文本。正确的标签是<img>. 我怀疑它实际上被解释为

<img id='chink' src='...' > HA!

意味着文本不是元素的一部分，也不会被删除。

而不是做$('#chink').remove()，做$('#bootypipe').empty()删除您添加的所有内容。

于 2013-01-30T04:13:47.573 回答
1

该<img>元素是自动关闭的，例如<br>或<hr>（您的演示代码无效，如另一个答案中所述）。

但是，如果您只在图像周围包含一个包装器 ( <p>, <span>, )，您的代码就可以工作。<div>然后移除包装（即$('p').remove();）。不要添加额外的 ids、类（您已经围绕#kinch 创建了一个函数。为什么要添加到代码中？）。只需针对包装器。$('#chink').parent().remove();也可以，并且它不偏向于哪个元素是父元素。

$("#kinch").click(function(){
    if ($("#kinch").is(":checked")) {
        $("#bootypipe").append("<p><image id = 'chink' src = '...'>HA!</p>");
    } else {
        $('p').remove();
        // or $('#chink').parent().remove(); // pick your poison
    }
});
于 2013-01-30T04:28:25.050 回答