Question

所以这是我的代码：

<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!仍会保留并随着时间的推移而逐渐增加。我该如何删除？

Answer 1

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

用一个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();

    }
});

Demo

Answer 2

你不能这样做：

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

而不是删除图片。

Answer 3

<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()删除您添加的所有内容。

Answer 4

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

但是如果您只是在图片周围添加了一个包装器（<p>，<span>，<div>），那么您的代码就可以正常运行。然后删除包装器（即$('p').remove();）。不要添加额外的id，类（你已经在#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
    }
});

图像被附加和删除但文本未被删除jQuery

4 个答案: