Question

我正在尝试创建一个按钮，单击该按钮会将图像作为列表项插入，然后再次单击将其从列表中删除。

到目前为止，我已经使用了出色的hide / show方法实现了这一目标。但是这样做意味着元素仍然存在于DOM中。

我想在单击时从DOM中完全删除图像，然后在再次单击时将同一图像重新添加到DOM中。

我查看了jquery的.remove，.append和.detach事件，但我一直在努力寻找答案。尽管我可以使用这些方法来调整段落，列表和div，但是我无法弄清楚如何使一个特定按钮抓住具有特定图像的一个特定列表项来实现隐藏和显示效果。

也许列表不是最适合此列表，但是由于它是UL父级，所以这是我最初的测试选择。

这可能吗？欢迎任何教育。

<div id=“toggletom”>this is my button</div>

<ul>
<li id="tomato"><img src="tomato.jpg"></li>
</ul>

<script>
$( "#toggletom" ).click(function() {
 $( "li" ).remove( ":contains('img src=tomato.jpg')" );
});
</script>

Answer 1

您可以通过多种方法来执行此操作。您提到想要.remove()与.hide()。您还希望稍后还原.show()的内容。

请考虑以下示例。

$(function() {
  function saveHtml(item) {
    var h = item.prop("outerHTML");
    item.parent().data("lastChild", h);
  }

  function restoreLast(lObj) {
    var h = lObj.data("lastChild");
    if (h != undefined) {
      $(h).appendTo(lObj);
    }
  }

  function addTom(lObj) {
    var li = $("<li>", {
      id: "tomato-" + ($("li", lObj).length + 1),
      class: "image item"
    }).appendTo(lObj);
    $("<img>", {
      src: "https://i.imgur.com/ROLJaSi.jpg"
    }).appendTo(li);
  }

  function removeLast(lObj) {
    saveHtml($("li:last-child", lObj));
    $("li:last-child", lObj).remove();
  }

  $("#toggle-tomato").click(function() {
    var t = $(this).text();
    if (t.indexOf("Hide") >= 0) {
      // Action: Hide Last Tomato
      removeLast($("#image-list"));
      $(this).text("Show Last Tomato");
    } else {
      //Action: Show Last Tomato
      restoreLast($("#image-list"));
      $(this).text("Hide Last Tomato");
    }
  });

  $("#add-tomato").click(function() {
    addTom($("#image-list"));
  });
});

#image-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

#image-list .item {
  padding: .25em;
}

#image-list .image img {
  width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="toggle-tomato">Hide Last Tomato</button> <button id="add-tomato">Add Tomato</button>

<ul id="image-list">
  <li id="tomato-1" class="image item"><img src="https://i.imgur.com/ROLJaSi.jpg"></li>
</ul>

使用.remove()删除jQuery对象非常容易。如果要在删除某些东西后放回去，则必须知道那是什么。这意味着将HTML或要删除的元素的模板存储在某个位置。由于我们正在使用列表，因此可以将其放入列表中。我使用.data()将其添加到父元素上。

您可以使它适应多种方式，就像jQuery一样，您需要一个Setter和Getter函数（显示/隐藏）。播放并在浏览器中检查它。您将看到该项目已从DOM中删除，但又被放回原处。全部使用相同的按钮。

注意事项：添加一个番茄，将其隐藏，添加另一个番茄，然后还原最后一个番茄。会发生什么？

没什么大不了的，但是您将有两个带有id的列表项，分别是tomato-2。您可以建立一个全局变量以保持计数，并在添加新变量时使用该变量而不是列表项的计数。

希望有帮助。

Answer 2

感谢@twisty，这是一个巨大的帮助。尽管我可以调整您提供的代码来实现我的目标，但这不是我想到的方法。我现在知道该对象需要来自某个地方。

我使用了jquery，因此在单击单个按钮时，它将检查是否存在ID为#tomato的列表项。如果有，则将其删除；如果没有，则将其添加。

因此，一键删除和添加IMG问题得到解决。

$(function() {
$(".addToms").click(function () {
    if ($("li").is('#tomato'))
       $("li").remove('#tomato');     
    else
        $("ul").prepend('<li class="centerUL" id="tomato"><img src="tomato.jpg"></li>');
    });
});

如第一篇文章中所述，这不使用标准的隐藏/显示方法。尽管该方法没有任何问题，但此处的目标是通过以下方式操作DOM：多个按钮可以创建用户订购的水果图像的列表，而不是顺序不变的静态预定列表但是元素是隐藏的，并在单击时显示。

如何使用一个按钮切换IMG删除和追加？

2 个答案: