Как удалить div по клику на кнопку в нем?

308
04 марта 2017, 04:50

Есть такой код.

<div class="form"><textarea class="ptext" ></textarea><br><input class="plink" type="text" value=""/><button id="del" >Удалить</button></div><br>
<div class="form"><textarea class="ptext" ></textarea><br><input class="plink" type="text" value=""/><button id="del" >Удалить</button></div><br>

<div class="form"><textarea class="ptext" ></textarea><br><input class="plink" type="text" value=""/><button id="del" >Удалить</button></div><br>

<div class="form"><textarea class="ptext" ></textarea><br><input class="plink" type="text" value=""/><button id="del" >Удалить</button></div><br>

<div class="form"><textarea class="ptext" ></textarea><br><input class="plink" type="text" value=""/><button id="del" >Удалить</button></div><br>

Как удалить div по клику на кнопку в нем? Например 2 или 4.

Answer 1

Примерно так:

$('.del').click(function() {
  $(this).parent().remove();
});  
Answer 2

ID должен быть уникальным.
Используйте класс:

function remove(){ 
  let w = this.closest('.form'), br = w.nextElementSibling; 
   
  if(br.nodeType === 1 && br.nodeName === 'BR') 
    br.remove(); 
   
  w.remove(); 
} 
 
Array.from(document.querySelectorAll('.del')).forEach(b => b.addEventListener('click', remove)); 
 
/* 
jQuery style: 
 
$('.del').on('click', function(){ 
  $(this).parent('.form').remove(); 
}); 
*/
<div class="form"><textarea class="ptext" ></textarea><br><input class="plink" type="text" value=""/><button class="del" >Удалить</button></div><br> 
 
<div class="form"><textarea class="ptext" ></textarea><br><input class="plink" type="text" value=""/><button class="del" >Удалить</button></div><br> 
 
 
<div class="form"><textarea class="ptext" ></textarea><br><input class="plink" type="text" value=""/><button class="del" >Удалить</button></div><br> 
 
<div class="form"><textarea class="ptext" ></textarea><br><input class="plink" type="text" value=""/><button class="del" >Удалить</button></div><br> 
 
 
<div class="form"><textarea class="ptext" ></textarea><br><input class="plink" type="text" value=""/><button class="del" >Удалить</button></div><br>

Answer 3

"use strict"; 
window.onload = function(){ 
 var _cover = document.querySelector("div.cover"); 
	 _cover.addEventListener("click",function(){ 
		var event = event || window.event; 
		var target = event.target || event.srcElement; 
		if(target.parentNode.tagName == "DIV"){ 
		target.parentNode.style.display = "none"; 
		}; 
		},false); 
}//конец функции
<div class="cover"> 
	<div class="form"><textarea class="ptext" >textarea_1</textarea><br><input class="plink" type="text" value=""/><button id="del" >Удалить</button></div><br> 
 
<div class="form"><textarea class="ptext" >textarea_2</textarea><br><input class="plink" type="text" value=""/><button id="del" >Удалить</button></div><br> 
 
 
<div class="form"><textarea class="ptext" >textarea_3</textarea><br><input class="plink" type="text" value=""/><button id="del" >Удалить</button></div><br> 
 
 
<div class="form"><textarea class="ptext" >textarea_4</textarea><br><input class="plink" type="text" value=""/><button id="del" >Удалить</button></div><br> 
 
 
<div class="form"><textarea class="ptext" >textarea_5</textarea><br><input class="plink" type="text" value=""/><button id="del" >Удалить</button></div><br> 
</div>

READ ALSO
Promise и foreach

Promise и foreach

Вопрос: практикуюсь в JavaScript по одноименной книжке, решил написать запрос на ресурс через Promises, однако они возвращают undefinedВ чем может быть...

268
Закладки на JavaScript

Закладки на JavaScript

Всем доброго пятничного дняКак я писал ранее, я изучаю JavaScript по книге Хавербеке

285
Проблема при передачи AJAX запроса в Laravel

Проблема при передачи AJAX запроса в Laravel

Не понемаю почему не получается передать запрос в контроллер средствами AJAX Цель нудно изменить значение $article->public на 0 (по дефолту 1)

274
Как правильно добавить события к динамически создаваемым элементам?

Как правильно добавить события к динамически создаваемым элементам?

Исользую jqueryМне нужно сделать, чтобы при наведении на любую ссылку в документе, отображалось бы - alert("ссылка")

333