Jquery - 如何删除不在 div 内的元素

Question

您好，我有以下 HTML：

<div id="screenlist">
www.sampleurl.com</br>
www.sampleurl.com</br>
www.sampleurl.com</br>
www.sampleurl.com</br>
www.sampleurl.com</br>
www.sampleurl.com</br>
 </div>

我有一个在该列表中附加 URL 的按钮：

 $('#screenlist').append(url + '</br>');

现在我想添加一个“X”以删除任何链接。

 $('#screenlist').append(url + ' <span class="delete_icon" /></br>');

如何将点击事件附加到跨度元素上，该事件在创建的每个元素上都是动态的，并且在点击时会删除整个行？

有什么线索吗？

Answer 1

如何将点击事件附加到跨度元素上，该事件在创建的每个元素上都是动态的，并且在点击时会删除整个行？

问题是你对element 的假设，在你的例子中，它更接近地代表list of text，这意味着你必须这样对待它，这会破坏任何自我（@987654323 @) 或 parent 或兄弟类型的相关逻辑，通常用于解决问题。

在这种情况下，有些人会为每个元素添加一个唯一的 id，例如

有效，不推荐

<span id='link_001'>www.sampleurl.com</span>
  <span class="delete_icon" onclick="document.getElementById('link_001').remove()"/></br>

但是之后你仍然会有一个挥之不去的X删除图标。

您需要将 URL 和 X 删除图标作为同一个更高元素的一部分，这样您就可以盲目地删除其 parent，或者提供一些唯一标识符，该标识符为 X 提供有关哪个 URL 的信息删除，然后对X 进行编码以删除自身。

推荐

推荐的方法将每个 URL 包装在一个无序列表 (ul) 中。 ul 仅作为示例提供，因为列表项 (li) 用作这些类型任务的流行容器。也就是说，如果不需要 ul/li，span 或 div 应该可以代替 li 正常工作。

由于X 是同一个父元素 (li) 的一部分，它可以快速找到它并理智地删除它，而无需尝试解析文本数据数组。

<ul>
<li>http://stackoverflow.com <span style="cursor: pointer;" onclick="remove(this)">x</span></li>
<li>http://askubuntu.com <span style="cursor: pointer;" onclick="remove(this)">x</span></li>
</ul>

<script>
function remove(o) {
   o.parentElement.remove();
}
</script>

虽然该问题专门询问如何使用 jQuery 执行此操作，但上述纯 JavaScript 示例没有提供额外代码。如果您愿意，您可以随时包裹$(this) 并致电onclick="$(this).parent.remove()"，等等。

Answer 2

假设您无法在您的 url 周围添加标签，这是一个可能的解决方案，我将自己的存储方法和 question and answers here 组合在一起。

https://jsfiddle.net/Hastig/ku0t7mey/13/

编辑

比起我下面的例子，一定要阅读这个人对a much more simplified solution 的回答。

$(document).on('click', '.delete_icon', function() {
    var toDelete = $(this).attr('stringStorage');
    function replaceNodeText() {
      if (this.nodeType === 3) {
          this.nodeValue = this.nodeValue.replace(replaceNodeText.find, replaceNodeText.replace);
      } else {
          $(this).contents().each(replaceNodeText);
      }
    }
    replaceNodeText.find = toDelete;
    replaceNodeText.replace = "";
    $("#screenlist").contents().each(replaceNodeText);
    $(this).next('br').remove();
    $(this).remove();
});



$(document).on('click', '.appenderator', function() {
  var i = $('#screenlist').attr('ignorethis');
  var url = 'www.sampleurl' + i + '.com';
  $('#screenlist').append(url + '<span class="delete_icon" stringStorage="' + url + '">x</span><br>');
  var iPlusOne = parseInt(i) + 1;
  $('#screenlist').attr('ignorethis', iPlusOne);
});

.delete_icon {
  display: inline-block;
  margin-right: 10px;
  background-color: red;
  color: white;
  cursor: pointer;
}
.delete_icon:hover { background-color: orange; }

br {
  line-height: 22px;
}

.appenderator {
  position: fixed;
  bottom: 0;
  left: 50%; transform: translateX(-50%);
  display: inline-flex;
  padding: 2px 8px 2px 8px;
  font-variant: small-caps;
  color: white;
  background-color: hsla(0, 0%, 0%, 1);
  cursor: pointer;
}
.appenderator:hover {
  color: white;
  background-color: hsla(180, 20%, 50%, 1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="screenlist" ignorethis="4">
www.sampleurl1.com<span class="delete_icon" stringStorage="www.sampleurl1.com">x</span><br>
www.sampleurl2.com<span class="delete_icon" stringStorage="www.sampleurl2.com">x</span><br>
www.sampleurl3.com<span class="delete_icon" stringStorage="www.sampleurl3.com">x</span><br>
</div>

<div class="appenderator">appenderator</div>

它的作用是将您的 url 存储到您附加的 delete_icon 跨度中的自定义属性中。当您删除该行时，它会从该属性中获取字符串，在 #screenlist 中搜索它，将其以及 .removes 和 .delete_icon 跨度本身以及尾随的 <br> 标记删除。

Answer 3

你能把你附加的内容包装在 span 标签中吗？

$('.delete_icon').click(function() {
 $(this).parent().hide('slow');
});

#screenlist span {
  display: flex;
}

.delete_icon {
  background-color: red;
  color: white;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="screenlist">
    <span>www.sampleurl.com<span class="delete_icon">x</span></span>
    <span>www.sampleurl.com<span class="delete_icon">x</span></span>
    <span>www.sampleurl.com<span class="delete_icon">x</span></span>
    <span>www.sampleurl.com<span class="delete_icon">x</span></span>
    <span>www.sampleurl.com<span class="delete_icon">x</span></span>
</div>