Question

我试图制作一个我将在一个网站上填写表格的油脂单脚本。我不拥有该网站。主要目的是消除“混乱”。信息文本＆＃39;并且只保留输入/选择字段。

问题在于段落没有附加类或ID。它确实有一个我要删除的信号，但是段落中还有一个INPUT以及同一段落内的信号。我希望INPUT留下来，但要删除判决。

网站上的表单有多个段落，但问题相同，因此不是一个问题＆＃39;每种形式。每个不同段落的句子也不同。以下是它的简化版本：

<div id="shop_info">
    <p>
        32. Enter the store's name/logo
        <input id="store_name" type="text" name="store_name">
    </p>

    <p>
        33. Enter the store's phone number
        <input id="store_phone" type="text" name="store_phone">
    </p>
</div>

^在上面的例子中，我需要删除这些句子：
的 32。输入商店的名称/徽标
的 33。输入商家的电话号码

因此，在脚本完成其工作后，它应该如下所示：

<div id="shop_info">
    <p>
        <input id="store_name" type="text" name="store_name">
    </p>

    <p>
        <input id="store_phone" type="text" name="store_phone">
    </p>
</div>

...如果有一种方法可以从段落中获取INPUTS（现在不需要），最好是这样结束：

<div id="shop_info">
    <input id="store_name" type="text" name="store_name">

    <input id="store_phone" type="text" name="store_phone">
</div>

...但即使有第一个解决方案，我也会很开心（如果INPUT保留在段落中，我只需要这些句子就可以了。）

我环顾四周，但我发现的代码示例并没有奏效，因为大多数解决方案都在搜索＆＃39;对于单个文本词而不是整个句子。我只粘贴了该页面的简化代码。还有更多的段落将INPUT嵌套在其中。

有没有人知道如何解决这个问题？

提前致谢！

修改
我查了一些你提供的代码。出于某种原因，即使它适用于codepen或其他脚本测试＆＃39;站点，一旦我在我的greasemonkey脚本中实现它，代码就不起作用了。我已决定向您展示该网站本身的表格形式。它是一个Amzn网站，适用于微型工作者。这是包含表单的页面：

page in question at Amzn microworkers website

这是imgur画廊，有3张图片：

imgur gallery with 3 images

第1张图片：整页的样子如何第二张图片：到现在为止我得到了什么第3张图片：我想要实现的目标（这就是为什么我创建了这个问题）

我希望我现在能让你的生活变得更轻松，所以你可以（如果你愿意的话）直接在网页上测试代码。

再次感谢您的帮助！

Answer 1

此代码段可能很有用，添加了注释来描述步骤

//get the parent element by the id
let getElem = document.getElementById("shop_info");
// get all the paragraph using querySelectorAll &
//iterate over it using forEach;
getElem.querySelectorAll('p').forEach(function(item) {
  // get the input element, this will be appended later
  let getInput = item.querySelector('input');
  // empty the p element
  item.innerHTML = "";
  // append the input back to the paragraph
  item.appendChild(getInput);
})

<div id="shop_info">
  <p>
    32. Enter the store's name/logo
    <input id="store_name" type="text" name="store_name">
  </p>

  <p>
    33. Enter the store's phone number
    <input id="store_phone" type="text" name="store_phone">
  </p>
</div>

Answer 2

你可以用jQuery试试这个

$(function(){
    var $inputs = $('#shop_info input');
    $('#shop_info').empty();
    $inputs.each(function(k, v){
        $(this).appendTo('#shop_info').wrap('<p/>');
    });
});

这里是示例https://codepen.io/anon/pen/oqKgWy

Answer 3

如果我理解正确，您想要清除<form>元素，则需要从中删除所有非<input>和非<select>元素。

如果是这种情况，你可以这样做：

＆＃13;

var holder = [];
$("input, select, button").each(function(){
   holder.push({parentForm: $(this).parents("form"), elm: $(this)});
}).detach();
$("form>").remove();
holder.forEach(elm => {
  elm.parentForm.append(elm.elm);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <div id="shop_info">
      <p>
          32. Enter the store's name/logo
          <input id="store_name" type="text" name="store_name">
      </p>

      <p>
          33. Enter the store's phone number
          <input id="store_phone" type="text" name="store_phone">
      </p>
    </div>
</form>

＆＃13;

这样做首先要浏览所有input，select和button元素，跟踪其父form元素是什么，将它们分开。然后，从表单中删除所有元素，并附上input，select和button元素。

Answer 4

我已使用新信息更新了我的帖子。我还包含了我试图修改的页面本身的链接。在imgur画廊，最后一张图片（从顶部开始的第3张）是我试图用我在这个（OP）问题的答案中找到的代码来实现的。

Javascript - 从元素中删除一个句子（没有id / class），但保留其余内容

4 个答案: