主页 / 问题 / 634781
Accepted
Анатолий
Asked:2020-03-03 07:20:22 +0000 UTC2020-03-03 07:20:22 +0000 UTC

如何在单击其中的按钮时删除 div？

  • 772

有这么一段代码。

<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。

javascript

3 个回答

  1. 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>

    • 2
  2. Best Answer

    或多或少是这样的：

    $('.del').click(function() {
  $(this).parent().remove();
});
    • 1 

  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>

    • 0

相关问题