javascript - 使用 Javascript 删除 div

Question

我正在尝试使用 javascript 删除一个 div 元素。我有以下代码，但由于某些原因它不起作用

HTML:

<div id="yes-drop" class="draggable drag-drop"><img src="{% static 'images/car.png' %}" class="brand"><button onclick="removediv()">-</button>  </div>
<div id="yes-drop" class="draggable drag-drop"><img src="{% static 'images/abc.png' %}" class="brand"><button onclick="removediv()">-</button>  </div>
<div id="yes-drop" class="draggable drag-drop"><img src="{% static 'images/bat.png' %}" class="brand"><button onclick="removediv()">-</button>  </div>
<div id="yes-drop" class="draggable drag-drop"><img src="{% static 'images/dog.png' %}" class="brand"><button onclick="removediv()">-</button>  </div>

我的JS

function removediv(input) {
    document.getElementById('yes-drop').removeChild(input.parentNode);
}

Fiddle Link

在 fiddle 中，我想在拖动元素时将其删除一次。(拖动后形成元素的克隆

更新 1

我的主要目标是当我点击那个特定元素的按钮时我应该能够删除任何这些元素

更新 2

在我的 fiddle 中，当我拖动一个元素时，会创建该元素的副本。我想在单击按钮时删除/删除该元素的副本

Answer 1

首先，使所有 div 的 id 唯一。

请看下面的代码片段，我使用 jQuery 删除了 closest()父元素。

$('button').on('click', function() {
  $(this).closest('.draggable').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="draggable drag-drop"><img src="{% static 'images/car.png' %}" class="brand"><button>-</button> </div>
<div class="draggable drag-drop"><img src="{% static 'images/abc.png' %}" class="brand"><button>-</button> </div>
<div class="draggable drag-drop"><img src="{% static 'images/bat.png' %}" class="brand"><button>-</button> </div>
<div class="draggable drag-drop"><img src="{% static 'images/dog.png' %}" class="brand"><button>-</button> </div>

如果可拖动元素是动态创建的，那么试试下面的代码，

$(document).on('click','.draggable .removediv',function () { // let button has class removediv
  $(this).closest('.drag-drop').remove();
});