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

在小提琴中，我想在拖动时删除一次元素。（拖动元素的克隆后形成

更新1

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

更新2

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

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();
});

Answer 2

在JavaScript中，您需要传递<script> function GetData() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4) { document.getElementById("demo").innerHTML = this.responseText + this.status + this.responseXML var response = this.responseText; } }; xhttp.open("GET", "http://localhost:3784/api/customers", true); xhttp.send(); } </script> <button onclick="GetData()">Get data</button> <p id="demo">data...</p>函数中的event参数，您可以像这样删除

onclick

在 fiddle 中，我做了修改。我希望这能指导你。

＆＃13;

function removediv(e) {
 e.target.parentNode.remove()
}

＆＃13;

function removediv(e) {
 e.target.parentNode.remove()
}

＆＃13;

textarea {
	resize: none;
	overflow: scroll;
	width: 80%;
}



#target {
	position: relative;
}

#outer-dropzone {
	height: 100%;
	width: 100%;
}
.dropzone {
	background-color: #ccc;
	border: dashed 4px transparent;
	border-radius: 4px;
	margin: 10px auto 30px;
	padding: 10px;
	width: 80%;
	transition: background-color 0.3s;
  
}

.drop-active {
	border-color: #aaa;
}
.drop-target {
	background-color: #29e;
	border-color: #fff;
	border-style: solid;
  
}

.drag-drop {
	display: inline-block;
	min-width: 40px;
	padding: 2em 0.5em;
	color: #fff;
	background-color: #29e;
	border: solid 2px #fff;
	-webkit-transform: translate(0px, 0px);
	transform: translate(0px, 0px);
	transition: background-color 0.3s;
  z-index: 9999;
}


#yes-drop img {
	margin-left: auto;
	margin-right: auto;
	display: block;
  height: 90%;
  width: 90%;
}

＆＃13;

用Javascript删除div

2 个答案: