刪除 self 元素 onclick
[英]Remove self element onclick
問題描述
我有一個使用 javascript 添加到我的 HTML 文檔的元素。 當我單擊同一個元素時，我試圖將其刪除。 我還不知道元素的 id，我現在剛剛包含了一個示例 id。
我已經嘗試在此處查看此答案（ 創建一個可以自行刪除的元素？ ）並嘗試使用此處提供的方法（ Javascript：如何使控件在方法中發送自身）以及引用該元素但已經沒運氣。
這是我到目前為止所擁有的。
function remove() { var element = this.id; //I have also tried using document.getElementByID(this.id) element.remove(); //I have also tried using element.parentNode.removeChild(element); to remove the element. }
<div id="i" onclick="remove(this)">Sample text</div>
我不確定我做錯了什么，但這是我不斷收到的錯誤。
“未捕獲的類型錯誤：無法讀取未定義的屬性‘移除’”
9 個解決方案
解決方案1
10 已采納 2019-05-24 00:30:50
你必須通過this經過HTML中的函數調用onclick所以它可能是指元素，那么你必須把它作為函數定義參數，否則，如果您使用this函數定義，它只是指窗口目的。
這將正常工作
function remove(el) { var element = el; element.remove(); }
<div id="i" onclick="remove(this)">Sample text</div>
解決方案2
4 2019-05-24 00:22:49
你的刪除功能應該是這樣的
function remove(elem){
elem.parentNode.removeChild(elem);
}
您在 html 中傳遞了this ，這是 html 標簽本身，但是，當您在 js 函數中使用this時， this是函數本身，因此嘗試使用 js 函數的 id 作為元素 id 會出錯
解決方案3
2 2019-05-24 00:34:43
為了匹配您的查詢，使用outerHTML將從 DOM 中刪除元素及其組件。
這需要使用document.getElementById() 。
function remove(me) { document.getElementById(me).outerHTML = "" }
<div id="i" onclick="remove(this.id)">Sample text</div>
更好的編碼實踐，因為帖子被點贊：
使用 3 個字符作為元素的 Id 更好
我們可以使用
target.nodeName按類型過濾元素，但類型需要大寫。
document.body.addEventListener("mousedown", function(e) { console.log(e.target.nodeName, e.target.id) if (e.target.nodeName === "DIV"){ document.getElementById(e.target.id).outerHTML = "" } }, false)
<body> <div id="el1">Sample text</div> <div id="el2">Sample text</div> <div id="el3">Sample text</div> <div id="el4">Sample text</div> <div id="el5">Sample text</div> <div id="el6">Sample text</div> </body>
解決方案4
2 2021-02-03 18:10:03
極簡解決方案：
<div onclick="this.remove()">Sample text</div>
解決方案5
1 2019-05-24 00:20:05
“未捕獲的類型錯誤：無法讀取未定義的屬性‘移除’”
這意味着您嘗試刪除的對象不存在完全有意義，因為this.id未在任何地方定義。
要使用 javascript 正確引用 html 元素，您需要使用document.getElementById()函數。 您要刪除的 html 元素的 id 是 i - 所以嘗試document.getElementById("i");
function remove() { var element = document.getElementById("i"); element.remove(); }
<div id="i" onclick="remove(this)">Sample text</div>
另一種更優雅的方法是通過回調函數傳遞對您單擊的對象的引用。 這只需通過添加事件作為參數來完成。 在回調中，您可以使用e.target引用元素。
function remove(e) { var element = e.target; element.remove(); }
<div id="i" onclick="remove(event)">Sample text</div>
解決方案6
0 2019-05-24 00:21:46
如果你想在普通的 JS 函數中使用 this，你需要將 this 綁定到函數。 否則它會默認為 window 對象， this 在普通 js 中指向 window 對象。 如果要使用 this in 指向調用該函數的對象，請使用()=>{}箭頭函數
function remove(element) { console.log(this) //will log Window Object //I have also tried using document.getElementByID(this.id) element.remove(); //I have also tried using element.parentNode.removeChild(element); to remove the element. }
<div id="i" onclick="remove(this)">Sample text</div>
解決方案7
0 2020-06-03 22:34:02
首先抓住你的元素：
const myDiv = document.querySelector('div');
然后給它添加點擊事件監聽器，所以當它被點擊時，回調方法被調用，其中'e.target'充當'this'，最后使用remove()刪除它：
myDiv.addEventListener('click', function(e){
e.target.remove();
});
解決方案8
-1 2019-05-24 00:31:54
不要使用內聯事件偵聽器（本示例中按鈕上的事件偵聽器僅用於簡化）。
function createDiv() { let div = document.createElement('div'); div.textContent = `Sample text, created on ${new Date()}`; div.addEventListener('click', remove); document.body.appendChild(div); } function remove(e) { e.target.remove(); }
<button type="button" onclick="createDiv()">Add a div</button>
如果您無法訪問添加偵聽器的元素，也可以使用委托偵聽器：
document.addEventListener('click', remove); function remove(e) { // you need some check here if you don't want any element to be removed on clicking it e.target.remove(); }
<div>foo</div> <div>Sample text</div>
解決方案9
-1 2019-05-24 00:48:42
我會做這樣的事情，所以你的 JavaScript 和 CSS 被緩存。 只需確保在部署時更新文件時更改文件名（當人們知道您的站點存在時） 。
//<![CDATA[ /* external.js */ var doc, bod, M, I, S, Q;// for use on other loads addEventListener('load', function(){ doc = document; bod = doc.body; M = function(tag){ return doc.createElement(tag); } I = function(id){ return doc.getElementById(id); } S = function(selector, within){ var w = within || doc; return w.querySelector(selector); } Q = function(selector, within){ var w = within || doc; return w.querySelectorAll(selector); } function remove(e){ e.parentNode.removeChild(e); } var sample = I('sample'); sample.onclick = function(){ remove(this); } }); // end load //]]>
/* external.css */ *{ box-sizing:border-box; padding:0; margin:0; } html,body{ width:100%; height:100%; } body{ background:#ccc; } #content{ padding:7px; }
<!DOCTYPE html> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> <head> <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' /> <title>Test Template</title> <link type='text/css' rel='stylesheet' href='external.css' /> <script type='text/javascript' src='external.js'></script> </head> <body> <div id='content'> <div id='sample'>Sample Text</div> </div> </body> </html>
使用JavaScript onclick刪除元素並在SQL中保存變量
[英]Remove element with JavaScript onclick and save variable in SQL
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.